Firefox 阻止自行加载资源(“script-src”)
Firefox blocks resource loading at self (“script-src”)
我正在尝试为 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
还有其他方法可以完成这项工作吗?还是我做错了什么?
您的问题是 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);
我正在尝试为 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
还有其他方法可以完成这项工作吗?还是我做错了什么?
您的问题是 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);