How to add the script tag to Nuxt project : วิธีเพิ่ม tag < script >…< /script> ลงใน project NuxtJs

การใส่ script ใน nuxtjs สามารถใส่ได้  2 ตำแหน่ง คือ

– Add to nuxt.config.js ( affects to all page )

ตัวอย่าง โจทคือ นำ code google ads ไปติดใน nuxtjs ของเรา โดยให้มีผลกับทุก page

เพิ่ม script ลงใน nuxt.config.js

ผลการรัน

– Add to xxx.vue ( only affect that page )

ตัวอย่าง โจทคือ นำ code google ads Tag ไปติดใน หน้า page โปรเจค nuxtJs ของเรา

ผลของการรัน code ตามตัวอย่างจะเป็นแบบนี้

โครงสร้างของ code 

script: [ 
 {

โครงสร้างเป็น array[ ..,… ,] ประกอบด้วย Object{…} หลายๆตัว 1 Object คือ 1 tag script <script> </script>

   hid: '.............'

hid = id ของ scripts ในหน้าเดียวกันต้องไม่ซ้ำกัน ถ้ามีซ้ำกันจะโดนทับด้วยอันล่าสุด

src: '~/plugins/script-injecter.js'
src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',

src ใส่ url หรือ parts ของไฟล์ js กรณีต้องการเรียกเป็นไฟล์

innerHTML: `window.googletag.cmd.push();`,

innerHTML คือ ใส่ Javascripts เข้าไป กรณีเป็นรูปแบบ inline script 

async: true/false
defer: true/false

ตั้งค่ารูปแบบการ โหลด scripts ของเรา โดยลำดับการโหลดเป็นดังภาพ

เปรียบเทียบ async/defer/ไม่มี
body: true

ปกติถ้าไม่ใส่ body: true scripts นี้จะไปอยู่ ใน <head>….</head> ถ้าใส่ body: true scripts จะไปอยู่ใน ลำดับสุดท้าย ของ <body> …. </body> หรือที่เราเรียกว่า ตำแหน่ง footer

type: 'text/javascript',
charset: 'utf-8',
crossorigin: 'anonymous'

type กับ charset การกำหนดภาษา และการเข้ารหัส ให้กับ scripts ส่วน crossorigin: ‘anonymous’ คือ ทำให้ เว็บไซต์สามารถเข้าถึง code ของ js ข้าม Domain กันได้ 

Trick

เมื่อใส่ scripts แบบ inline โดยใช้ innerHTML ปกติจะใช้งานไม่ได้ เพราะในโปรเจคที่เขียนด้วย vue js จะมีระบบป้องกันการถูกโจมตีที่ชื่อว่า Sanitizers หน้าที่ของ Sanitizers คือ ไว้สำหรับป้องกัน การใส่สคริปที่ไม่พึงประสงค์เข้ามาใน หน้า page ที่เรียกว่า Cross-Site Scripting หรือ XSS เมื่อมีการ พยายาม ใส่ script เข้ามา ตัว Sanitizers จะ block ไม่ให้สคริปนั้น ทำงาน เพราะอาจจะเป็นสคริปที่ใช้โจมตีระบบ หรือใช้ระบบเรา เป็นตัวกลาง กระจาย ไวรัส เข้าสู่เครื่องของ user ที่เปิดเข้ามายังเว็บของเรา

ในที่นี้ เราจำเป็นต้องเขียน inline Javascript เข้าไป จึงต้อง Disable Sanitizers และหาทางป้องกัน XSS ด้วยวิธีอื่น เราสามารถ Disable ได้ด้วยการใส่ __dangerouslyDisableSanitizers: [‘script’]

__dangerouslyDisableSanitizers: ['script']

include inline Javascript. For that to work however, you need to add the __dangerouslyDisableSanitizers: [‘script’]