Question

新的Web组件规范的一部分是Shadow DOM - 一种用组件HTML本身嵌入<style>和<script>资源的方法。

据我所知，Shadow DOM模仿了大多数浏览器中已经存在多少现有控件 - 例如，浏览器的原生视频播放器内部会有按钮和样式，这些都是控件的一部分＆＃39; s DOM。

但是，这似乎与禁用eval和内联脚本的内容安全策略发生冲突。

一个简单示例（仅适用于支持<template>和createShadowRoot()的浏览器）：

＆＃13;

// Create the shadow DOM
var shadow = document.querySelector('#testOutput').createShadowRoot();

// Get the template fragment and add it to the shadow DOM
shadow.appendChild(document.querySelector('#testTemplate').content);

＆＃13;

<template id="testTemplate">
    <style>
        .foo { color: #e00; }
    </style>
    <script>
         alert('Hello from the component');
    </script>
    <div class="foo">bar</div>
</template>

<div id="testOutput">shadow</div>

＆＃13;

运行这个，你就会变红＆＃34; bar＆＃34;文字和警报。

现在通过添加阻止内联脚本的标头来应用CSP：

Content-Security-Policy:default-src 'self'; object-src 'none'; img-src 'self' data:;

现在该组件只会产生错误。

这似乎使CSP和Web组件完全不兼容，这很奇怪，因为CSP相当成熟（除了IE11以外的所有内容都支持），而Web Components是非常新的。它还将完全排除模块化Web组件库对安全站点的可行性，除非它们也可以作为更多单片JS / CSS提供。

有什么方法吗？
有没有办法在CSP中允许Shadow DOM？
有没有办法创建Shadow DOM，以CSP允许的方式对其进行沙盒化？
这是由于Shadow DOM规范的某些部分还没有完全实现吗？

2017年更新

Shadow DOM并不是一个真正的问题，因为其中嵌入了<script>个标签。这可以避免，但是HTML导入的一个问题，但这确实是一个不同的问题（Chrome现在可能没有实际意义了。）

有没有办法在Shadow DOM中使用具有严格内容安全策略的脚本？

2017年更新

0 个答案: