Cố gắng thêm quy tắc vào biểu định kiểu CSS cho "Thao tác không an toàn" trong Firefox

Question

Tôi đang sử dụng Greasemonkey và cố thêm quy tắc vào một miền cụ thể. Nhưng nó dẫn đến một lỗi nói rằng The operation is insecure.
Mã hoạt động tốt trên Chrome.

Các kịch bản chạy trên http://mydomain.com/test/test.php
Và file CSS là http://cdn.mydomain.com/test/css/global.css

chức năng của tôi:

function css(selector, property, value) { 
    for (var i=0; i<document.styleSheets.length;i++) 
    { 
     try 
     { 
      document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length); 
     } 
     catch(err) 
     { 
      try // IE 
      { 
       document.styleSheets[i].addRule(selector, property+':'+value); 
      } 
      catch(err) {} 
     } 
    } 
} 

Trên Google tôi thấy rằng nó có thể là bởi vì tôi đang cố gắng để truy cập vào cross-domain, vì vậy tôi đã thử thêm URL vào tệp CSS vào 'URL được chấp nhận' nhưng không có kết quả.

Làm cách nào để khắc phục sự cố này?

Answer 1

Có, Firefox chặn quyền truy cập vào biểu định kiểu là tên miền chéo. Nó có thể (hoặc ít nhất là sử dụng để) ném ngoại lệ:

"Tiếp cận hạn chế URI bị từ chối" mã số: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
vị trí: .... ..

Nhưng, với CSS, bạn không cần phải thêm quy tắc vào một biểu định kiểu cụ thể. Chỉ cần ghi đè lên phong cách mà bạn quan tâm.

Ví dụ, nếu trang đó đặt:

body { 
    background: white; 
} 

Và kịch bản của bạn đặt ra:

body { 
    background: red; 
}  

Sau đó trang web sẽ có màu đỏ (danh nghĩa).

Cách dễ nhất, thông minh nhất để thay đổi kiểu trang đích, xem câu trả lời trước như this one.

Answer 2

Quy tắc từ biểu định kiểu chạy với quyền của biểu định kiểu đó theo nhiều cách khác nhau. Điều đó có nghĩa là nếu bạn có thể đưa các quy tắc vào một bảng định kiểu chéo trang, bạn có thể thực hiện một số cuộc tấn công cross-site. Đó là lý do tại sao Firefox chặn thêm quy tắc vào biểu định kiểu trên trang web.

Có thể Chrome chạy tất cả các quy tắc có quyền truy cập tài liệu liên kết, đó là lý do tại sao nó cho phép bạn thêm nội dung vào trang tính .... Tuy nhiên, lưu ý rằng Chrome sẽ không cho phép bạn đọc một dấu thập -bảng định kiểu trang web. Lưu ý rằng nếu bạn tải biểu định kiểu của mình với CORS (bằng cách đặt thuộc tính "crossorigin" trên <link> và đảm bảo CDN của bạn đang phân phối đúng tiêu đề) thì bạn sẽ có thể truy cập vào trang web đó.

Answer 3

tôi tìm thấy giải pháp này làm việc xung quanh vấn đề này:

var style = document.createElement("style"); 
document.head.appendChild(style); 
style.sheet.insertRule("body { font-size:40px; }", 0);