javascript 如何配置jQuery以确保外部脚本(src="...”)在使用.html()注入标记时保持外部?

jslywgbw  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(102)

bounty 8小时后到期。此问题的答案有资格获得+50声望奖励。Đinh Carabus希望引起更多的注意这个问题。

我注意到,当我使用jQuery的.html('...')方法插入包含外部<script src="..."></script>标记的标记时,jQuery并没有直接将script标记插入DOM。相反,它首先检索脚本的内容,然后生成一个包含原始内容的新inline<script>标记。
换句话说,如果插入的HTML包含:

<script src="xyz.js"></script>

jQuery将其转换为:

<script> ... contents of xyz.js ... </script>

但是,由于我的内容安全策略(CSP)禁止内联脚本标记,浏览器现在拒绝执行此脚本。我理解jQuery必须解析脚本标记,因为通过.innerHTML设置HTML不会执行标记中包含的脚本。但是为什么外部脚本会转换为内联脚本呢?有没有办法在这里配置jQuery的行为,或者我必须自己重写.html()

jyztefdp

jyztefdp1#

前几天也有同样的问题
我是这样做的;
变量数据包含纯字符串形式的html。
变量容器是我想要追加的主体(jQuery El)

success : data => {
    // dump data to container
    container.css({opacity: '0.0'});
    /* do not use jQuery -> it will always trigger the CSP, and the worst part about this is the CSP is right */
    /* TL;DR jQuery fails to load script with src by setting src, instead it converts the script to inline, and the CSP says no! */
    container[0].innerHTML = data;
    /* instead we do this! */
    container.find(`script[src]`).toArray().map(Script => {
     let test = document.createElement(`script`)
     test.src = Script.src;
     $(`head`)[0].appendChild(test);
    });
    container.delay(50).animate({opacity: '1.0'}, 300);
    setTimeout(() => { $(`head script`).remove(); }, 250);
    // clear data var
    data = null;
    container = null;
    $(`body`).removeClass(`hidden-menu`);
},
2jcobegt

2jcobegt2#

像这样的东西应该工作。我们可以只使用.appendTo(),而不是使用.html()
https://codepen.io/Terrafire123/pen/mdaKpJG?editors=1010

var myString = `
<h1>My First Heading</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<p>My first paragraph.</p> 
`;

var html = jQuery(myString);
html.appendTo(jQuery("#myTarget"));

相关问题