ฉันขอให้เบราว์เซอร์ไม่เรียกใช้ <script> s ภายในองค์ประกอบได้หรือไม่?

เป็นไปได้หรือไม่ที่จะบอกให้เบราว์เซอร์ไม่เรียกใช้ JavaScript จากบางส่วนของเอกสาร HTML

ชอบ:

<div script="false"> ...

อาจเป็นประโยชน์ในฐานะคุณลักษณะด้านความปลอดภัยเพิ่มเติม สคริปต์ทั้งหมดที่ฉันต้องการถูกโหลดในส่วนเฉพาะของเอกสาร ไม่ควรมีสคริปต์ในส่วนอื่น ๆ ของเอกสารและหากมีไม่ควรเรียกใช้

ใช่คุณสามารถ :-) คำตอบคือ: นโยบายความปลอดภัยของเนื้อหา (CSP)

เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับแฟล็กนี้ซึ่งจะบอกให้เบราว์เซอร์โหลดโค้ด JavaScript จากไฟล์ภายนอกที่เชื่อถือได้เท่านั้นและไม่อนุญาตให้ใช้โค้ด JavaScript ภายในทั้งหมด! ข้อเสียเพียงอย่างเดียวคือคุณไม่สามารถใช้ JavaScript แบบอินไลน์ใด ๆ ในทั้งหน้าของคุณได้ (ไม่ใช่เฉพาะในหน้าเดียว<div>) แม้ว่าอาจมีวิธีแก้ปัญหาโดยการรวม div แบบไดนามิกจากไฟล์ภายนอกที่มีนโยบายความปลอดภัยอื่น แต่ฉันไม่แน่ใจเกี่ยวกับเรื่องนั้น

แต่ถ้าคุณสามารถเปลี่ยนไซต์ของคุณเพื่อโหลด JavaScript ทั้งหมดจากไฟล์ JavaScript ภายนอกคุณสามารถปิดใช้งาน JavaScript แบบอินไลน์พร้อมกับส่วนหัวนี้ได้!

นี่คือบทช่วยสอนที่ดีพร้อมตัวอย่าง: HTML5Rocks Tutorial

หากคุณสามารถกำหนดค่าเซิร์ฟเวอร์เพื่อส่งค่าสถานะ HTTP-Header นี้โลกจะน่าอยู่ขึ้น!

คุณสามารถบล็อก JavaScript ที่โหลดโดย<script>ใช้beforescriptexecuteเหตุการณ์:

<script>
  // Run this as early as possible, it isn't retroactive
  window.addEventListener('beforescriptexecute', function(e) {
    var el = e.target;
    while(el = el.parentElement)
      if(el.hasAttribute('data-no-js'))
        return e.preventDefault(); // Block script
  }, true);
</script>

<script>console.log('Allowed. Console is expected to show this');</script>
<div data-no-js>
  <script>console.log('Blocked. Console is expected to NOT show this');</script>
</div>

โปรดทราบว่าbeforescriptexecuteถูกกำหนดไว้ใน HTML 5.0 แต่ถูกลบออกใน HTML 5.1 Firefox เป็นเบราว์เซอร์หลักเพียงตัวเดียวที่ใช้งานได้

ในกรณีที่คุณกำลังแทรกกลุ่ม HTML ที่ไม่น่าเชื่อถือในหน้าของคุณโปรดทราบว่าสคริปต์การบล็อกภายในองค์ประกอบนั้นจะไม่ให้ความปลอดภัยมากขึ้นเนื่องจาก HTML ที่ไม่น่าเชื่อถือสามารถปิดองค์ประกอบที่เป็นแซนด์บ็อกซ์ได้ดังนั้นสคริปต์จะถูกวางไว้ภายนอกและเรียกใช้

<img onerror="javascript:alert('foo')" src="//" />และสิ่งนี้จะไม่ปิดกั้นสิ่งที่ต้องการ

คำถามที่น่าสนใจฉันไม่คิดว่าจะเป็นไปได้ แต่ถึงอย่างนั้นก็ฟังดูเหมือนจะแฮ็ค

หากเนื้อหาของ div นั้นไม่น่าเชื่อถือคุณจะต้องหลบหนีข้อมูลบนฝั่งเซิร์ฟเวอร์ก่อนที่จะส่งในการตอบสนอง HTTP และแสดงผลในเบราว์เซอร์

หากคุณต้องการเพียงลบ<script>แท็กและอนุญาตแท็ก html อื่น ๆ ให้ดึงแท็กออกจากเนื้อหาและปล่อยส่วนที่เหลือ

มองหาการป้องกัน XSS

https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet

JavaScript ถูกเรียกใช้งานแบบ "อินไลน์" กล่าวคือตามลำดับที่ปรากฏใน DOM (หากไม่เป็นเช่นนั้นคุณจะไม่แน่ใจว่าตัวแปรบางตัวที่กำหนดไว้ในสคริปต์อื่นสามารถมองเห็นได้เมื่อคุณใช้เป็นครั้งแรก ).

นั่นหมายความว่าในทางทฤษฎีคุณสามารถมีสคริปต์ที่จุดเริ่มต้นของเพจ (เช่น<script>องค์ประกอบแรก) ซึ่งดูผ่าน DOM และลบ<script>องค์ประกอบและตัวจัดการเหตุการณ์ทั้งหมดภายใน<div>ไฟล์.

แต่ในความเป็นจริงนั้นซับซ้อนกว่า: DOM และการโหลดสคริปต์เกิดขึ้นแบบอะซิงโครนัส ซึ่งหมายความว่าเบราว์เซอร์รับประกันเฉพาะว่าสคริปต์สามารถมองเห็นส่วนของ DOM ซึ่งอยู่ก่อนหน้านั้นได้ (เช่นส่วนหัวจนถึงในตัวอย่างของเรา) ไม่มีการค้ำประกันใด ๆ ที่นอกเหนือไปจากนี้ (เกี่ยวข้องกับdocument.write()) ดังนั้นคุณอาจเห็นแท็กสคริปต์ถัดไปหรืออาจจะไม่เห็น

คุณสามารถล็อกonloadเหตุการณ์ของเอกสาร - ซึ่งจะทำให้แน่ใจว่าคุณมี DOM ทั้งหมด - แต่ในเวลานั้นโค้ดที่เป็นอันตรายอาจทำงานได้แล้ว สิ่งที่แย่ลงเมื่อสคริปต์อื่น ๆ จัดการกับ DOM โดยเพิ่มสคริปต์ที่นั่น ดังนั้นคุณจะต้องตรวจสอบทุกการเปลี่ยนแปลงของ DOM ด้วย

โซลูชัน @cowls (การกรองบนเซิร์ฟเวอร์) จึงเป็นทางออกเดียวที่สามารถทำได้ในทุกสถานการณ์

หากคุณต้องการแสดงโค้ด JavaScript ในเบราว์เซอร์ของคุณ:

การใช้ JavaScript และ HTML คุณจะต้องใช้เอนทิตี HTMLเพื่อแสดงโค้ด JavaScript และหลีกเลี่ยงการเรียกใช้โค้ดนี้ คุณจะพบรายการเอนทิตี HTML ได้ที่นี่:

• http://dev.w3.org/html5/html-author/charref
• http://www.w3schools.com/html/html_entities.asp

หากคุณใช้ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ (PHP, ASP.NET ฯลฯ ) ส่วนใหญ่อาจมีฟังก์ชันที่จะหลีกเลี่ยงสตริงและแปลงอักขระพิเศษเป็นเอนทิตี HTML ใน PHP คุณจะใช้ "htmlspecialchars ()" หรือ "htmlentities ()" ส่วนหลังครอบคลุมอักขระ HTML ทั้งหมด

หากคุณต้องการแสดงโค้ด JavaScript ของคุณในทางที่ดีให้ลองใช้เครื่องมือเน้นรหัสตัวใดตัวหนึ่ง:

• http://prismjs.com/
• http://alexgorbatchev.com/SyntaxHighlighter/
• https://highlightjs.org/

ฉันมีทฤษฎี:

• ห่อส่วนเฉพาะของเอกสารไว้ในnoscriptแท็ก
• ใช้ฟังก์ชัน DOM เพื่อละทิ้งscriptแท็กทั้งหมดภายในnoscriptแท็กจากนั้นแกะเนื้อหาออก

ตัวอย่างการพิสูจน์แนวคิด:

window.onload = function() {
    var noscripts = /* _live_ list */ document.getElementsByTagName("noscript"),
        memorydiv = document.createElement("div"),
        scripts = /* _live_ list */ memorydiv.getElementsByTagName("script"),
        i,
        j;
    for (i = noscripts.length - 1; i >= 0; --i) {
        memorydiv.innerHTML = noscripts[i].textContent || noscripts[i].innerText;
        for (j = scripts.length - 1; j >= 0; --j) {
            memorydiv.removeChild(scripts[j]);
        }
        while (memorydiv.firstChild) {
            noscripts[i].parentNode.insertBefore(memorydiv.firstChild, noscripts[i]);
        }
        noscripts[i].parentNode.removeChild(noscripts[i]);
    }
};

body { font: medium/1.5 monospace; }
p, h1 { margin: 0; }

<h1>Sample Content</h1>
<p>1. This paragraph is embedded in HTML</p>
<script>document.write('<p style="color: red;">2. This paragraph is generated by JavaScript</p>');</script>
<p>3. This paragraph is embedded in HTML</p>
<h1>Sample Content in No-JavaScript Zone</h1>
<noscript>
    <p>1. This paragraph is embedded in HTML</p>
    <script>document.write('<p style="color: red;">2. This paragraph is generated by JavaScript</p>');</script>
    <p>3. This paragraph is embedded in HTML</p>
</noscript>
<noscript>
    <p>1. This paragraph is embedded in HTML</p>
    <script>document.write('<p style="color: red;">2. This paragraph is generated by JavaScript</p>');</script>
    <p>3. This paragraph is embedded in HTML</p>
</noscript>

หากคุณต้องการเปิดใช้งานแท็กสคริปต์อีกครั้งในภายหลังวิธีแก้ปัญหาของฉันคือทำลายสภาพแวดล้อมของเบราว์เซอร์เพื่อให้สคริปต์ใด ๆ ที่ทำงานอยู่จะทำให้เกิดข้อผิดพลาดค่อนข้างเร็ว อย่างไรก็ตามมันไม่น่าเชื่อถือทั้งหมดดังนั้นคุณจึงไม่สามารถใช้เป็นคุณสมบัติความปลอดภัยได้

หากคุณพยายามเข้าถึงคุณสมบัติส่วนกลาง Chrome จะทำให้เกิดข้อยกเว้น

setTimeout("Math.random()")
// => VM116:25 Uncaught Error: JavaScript Execution Inhibited  

ฉันเขียนทับคุณสมบัติที่เขียนทับได้ทั้งหมดwindowแต่คุณสามารถขยายเพื่อทำลายฟังก์ชันการทำงานอื่น ๆ ได้

window.allowJSExecution = inhibitJavaScriptExecution();
function inhibitJavaScriptExecution(){

    var windowProperties = {};
    var Object = window.Object
    var console = window.console
    var Error = window.Error

    function getPropertyDescriptor(object, propertyName){
        var descriptor = Object.getOwnPropertyDescriptor(object, propertyName);
        if (!descriptor) {
            return getPropertyDescriptor(Object.getPrototypeOf(object), propertyName);
        }
        return descriptor;
    }

    for (var propName in window){
        try {
            windowProperties[propName] = getPropertyDescriptor(window, propName)
            Object.defineProperty(window, propName, {
                get: function(){
                    throw Error("JavaScript Execution Inhibited")
                },
                set: function(){
                    throw Error("JavaScript Execution Inhibited")
                },
                configurable: true
            })
        } catch (err) {}
    }

    return function allowJSExecution(){
        for (var propName in window){
            if (!(propName in windowProperties)) {
                delete windowProperties[propName]
            }
        }

        for (var propName in windowProperties){
            try {
                Object.defineProperty(window, propName, windowProperties[propName])
            } catch (err) {}
        }
    }
}