Mô hình bảo mật canvas có bỏ qua các tiêu đề truy cập-kiểm soát-cho phép-xuất xứ không?

Question

Dường như ngay cả khi bạn đặt tiêu đề cho phép kiểm soát truy cập nguồn gốc để cho phép truy cập từ mydomain.org vào một hình ảnh được lưu trữ trên miền example.org, cờ 'sạch sẽ gốc' của canvas được đặt thành false và cố gắng thao tác dữ liệu pixel của hình ảnh đó sẽ kích hoạt ngoại lệ bảo mật.

Vải không nên 'tuân thủ tiêu đề quyền truy cập-cho phép kiểm soát quyền truy cập và cho phép truy cập vào dữ liệu của hình ảnh mà không cần ném ngoại lệ?

Answer 1

Tiêu đề access-control-allow-origin chỉ hoạt động cho tên miền chéo XmlHttpRequest. Thẻ <canvas> KHÔNG tôn trọng thuộc tính đó và do đó những gì bạn đang cố gắng sẽ không hoạt động.

Xem http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

Tùy chọn duy nhất là proxy hình ảnh qua máy chủ của riêng bạn.

Answer 2

Trừ khi tôi là hoàn toàn đọc nó sai, spec dường như cho thấy rằng nó sẽ làm việc với canvas - xem "Không làm hoen ố những yếu tố canvas" phần dưới Trường hợp sử dụng:

http://www.w3.org/TR/cors/#use-cases

Nó đặc biệt nói về việc vẽ hình ảnh từ xa được phục vụ với tiêu đề truy cập-cho phép-nguồn gốc xuất xứ vào canvas và sau đó gọi toDataURL() trên canvas.

Có thể trình duyệt chưa bắt kịp với điều này, nhưng đó là cách tôi đọc thông số kỹ thuật, ít nhất.

Answer 3

Thực ra, canvas DOES tôn vinh "quyền truy cập-cho phép-xuất xứ" nếu hình ảnh có thuộc tính "crossOrigin" có giá trị "ẩn danh".

trình khá tốt trong một ví dụ cố định: http://jsfiddle.net/WLTqG/29/

var ctx = document.getElementById('c').getContext('2d'), 
    img = new Image(); 
img.crossOrigin = 'anonymous'; 
img.src = 'https://lh3.googleusercontent.com/-LAFgeyNL894/AAAAAAAAAAI/AAAAAAAAAAA/-CWBGs9xLXI/s96-c/photo.jpg'; 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    try { 
     var imgData = ctx.getImageData(0, 0, 100, 100); 
     $('.button').on('click', function(e) { 
      e.preventDefault(); 
      applyFilter(ctx, imgData); 
     }); 
    } catch(err) { 
     $('.button').hide(); 
     $('body').append("Access denied"); 
     console.log(err); 
    } 
}; 
function applyFilter(ctx, data) { 
    for (var x = 0; x < data.width; x++) { 
     for (var y = 0; y < data.height; y++) { 
      var index = 4 * (y * data.width + x); 
      data.data[index] = data.data[index] - 50; //r 
      data.data[index+1] = data.data[index+1] - 50; //g 
      data.data[index+2] = data.data[index+2] - 50; //b 
      data.data[index+3] = data.data[index+2] - 50; //a 
     } 
    } 
    ctx.putImageData(data, 0, 0); 
} 

(tôi đã sử dụng jQuery chỉ cho DOM-thao tác và các sự kiện xử lý)