通过 jQUery 创建沙盒 iFrame

Question

我正在尝试使用 jQuery 创建一个没有任何权限的 iFrame。我可以添加 iFrame 属性，但它需要一个值。我通过添加空值 (' ') 使用脏解决方案，但这是正确的方法吗？有没有更好的方法来创建无需许可的沙盒 iFrame？

$(function() {
  $('article').each(createIFrame);
});

function createIFrame() {
  setArticleContent($(this), 'hello sandbox');
}

function setArticleContent(article, content) {
  article.find('span>p').first().text('');
  $('<iframe>', {
    srcdoc: '<p>' + content + '</p>',
    frameborder: '0',
    sandbox: ' ',
    style: 'background:#00FF00',
  }).appendTo(article.find('span>p').first());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <span>
        <p>helloworld</p>
      </span>
</article>

Answer 1

I am using a dirty solution by adding an empty value (' ') but is this the right way?

一点也不脏，但是您应该注意，根据规范，您应该使用空字符串：

The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox

$('<iframe>', {
  srcdoc: '<p>' + content + '</p>',
  frameborder: '0',
  sandbox: '', // note the space was removed
  style: 'background: #00FF00',
}).appendTo(article.find('span>p').first());

理想情况下 style 也应该通过外部样式表进行设置。

通过 jQUery 创建沙盒 iFrame

Create sandboxed iFrame via jQUery

html

javascript

iframe

jquery

sandbox