Firefox 阻止自行加载资源（“script-src”）答案

【问题标题】：Firefox blocks resource loading at self (“script-src”)Firefox 阻止自行加载资源（“script-src”）
【发布时间】：2018-05-22 09:34:30
【问题描述】：

我正在尝试为 firefox 创建一个待办事项扩展，我需要在单击删除按钮时触发一个函数（第 8 行）。

function viewPrevious(){
  var prom = browser.storage.sync.get(null);
  prom.then((res) => {
    var text = '<ul class="list-group list-group-flush">';
    var i;
    for (i = 0; i < res.todos.length; i+=4) {
      text+='<ul class="list-group list-group-flush"><li class="list-group-item">'+res.todos[i]+'   '+res.todos[i+1]+'   '+res.todos[i+2]+'</li>';
      text+='<button type="button" class="btn btn-primary" onClick="myFunc" id='+i+'">Delete</button>';
    }
    text+='</ul>';
    document.getElementById("oldTodos").innerHTML = text;
    window.onload=function(){
      console.log("KKOO");
      var promii = browser.storage.sync.get(null);
      promii.then((res) => {
        for(i=0;i<res.todos.length;i+=4){
          console.log("redda");
          document.getElementById(i.toString()).addEventListener('click',function(){
            console.log('kjk'+i);
            var removingItem = browser.storage.sync.remove(i);
            removingItem.then(function(){
              viewPrevious();
            });
          });
        }
      });
    }
  });
}

我在第 8 行添加了 onClick="myFunc" 功能是，

function myFunc(){
  console.log("ABC");
}

当我运行它并单击按钮时，它给了我以下错误

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onclick attribute on BUTTON element.

我尝试使用元标记并提供script-src 'unsafe-inline'，但它也不起作用。而且我对这个 content security policy

不太了解

还有其他方法可以完成这项工作还是我做错了什么？

【问题讨论】：

标签： javascript firefox-addon meta content-security-policy

【解决方案1】：

您的问题是 HTML onclick 属性。要正确执行此操作，您需要像在稍后的单击侦听器上一样使用 addEventListener。

// Untested, but it should put you on the correct path
var ul = document.createElement('ul');
ul.classList.add('list-group', 'list-group-flush');

var i;
for (i = 0; i < res.todos.length; i+=4) {
    // I'm ignoring <ul class="list-group list-group-flush"> from your example, because
    // this doesn't look like you intend to be nesting lists
    var li = document.createElement('li';
    li.classList.add('list-group-item');

    // In your example, you had left an open XSS vulnerability by simply
    // concatenating user todos with your markup, textContent is much safer
    li.textContent = res.todos[i]+'   '+res.todos[i+1]+'   '+res.todos[i+2];
    ul.appendChild(li);

    var button = document.createElement('button');
    button.classList.add('btn', 'btn-primary');
    button.addEventListener('click', myFunc);
    button.id = i;

    ul.appendChild(button);
}
document.getElementById("oldTodos").innerHTML = '';
document.getElementById("oldTodos").appendChild(ul);

【讨论】：