2013-08-26 30 views
123

Trong ví dụ đơn giản này, tôi đang cố đặt tiêu đề CSP với tiêu đề meta http-equiv. Tôi đã bao gồm hình ảnh base64 và tôi đang cố gắng làm cho Chrome tải hình ảnh.Chính sách bảo mật nội dung "dữ liệu" không hoạt động cho base64 Hình ảnh trong Chrome 28

Tôi nghĩ rằng từ khóa data nên làm điều đó, nhưng bằng cách nào đó nó không hoạt động.

tôi chỉ nhận được lỗi sau đây trong Công cụ phát triển:

từ chối để tải hình ảnh 'data: image/png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7 ... nw7yk4Mjr6GLUY + joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' vì nó vi phạm các nội dung sau đây Chỉ thị chính sách bảo mật: "img-src 'self' data".

Ví dụ mã (JSFiddle không hoạt động ví dụ này bởi vì tôi không thể thiết lập tiêu đề meta có):

<html> 
<head> 
<meta http-equiv="Content-Security-Policy" content=" 
     default-src 'none'; 
     style-src 'self' 'unsafe-inline'; 
     img-src 'self' data; 
     " /> 
    <style> 
     #helloCSP { 
      width: 50px; 
      height: 50px; 
      background: url(data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7+iHh/JNTfh9dNUYGPjTvskXFfOLi/daVe96es4eHPWIiOqbi9dNRvzWwexdV9U1NeFSS94iIvuxodVGP/ZsZM8jI+ibm/alluQzMdxSSvbGstwsKu2Yid4iIfjQu/JnYO6djvajlMQEBPvLuOJdXeMxL/3jzPBSTdwqKNY2Mf3i4vU5OfbPz/3f3/zUv/zizO0tLc0NDfMzM+UlJekpKeEhId0dHdUVFdkZGdEREf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat; 
      border: 1px solid red; 
     } 
    </style> 
</head> 
<body> 
<h1>CSP</h1> 
    <div id="helloCSP"></div> 
</body> 
</html> 

Bạn cũng có thể mở ví dụ này ở đây:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

Trả lời

262

Theo the grammar in the CSP spec, bạn cần chỉ định các sơ đồ là scheme:, không chỉ scheme. Vì vậy, bạn cần thay đổi chỉ thị nguồn hình ảnh thành:

img-src 'self' data:; 
+19

Lý do cho sự lúng túng này là khó phân biệt giữa sơ đồ 'dữ liệu' và máy chủ có tên 'dữ liệu'. –

+1

Tôi nghĩ rằng URL hơi khó xử lý để phân tích cú pháp nói chung. –

+2

Tôi đã có dữ liệu của tôi: trong dấu ngoặc kép - 'dữ liệu:' - điều đó cũng không hoạt động - và câu trả lời của bạn cũng cảnh báo tôi là vấn đề – kris

Các vấn đề liên quan