2013-01-15 27 views
5

Tôi đang sử dụng canvas HTML5 và chức năng .toDataURL() thông qua phương thức KineticJS's.toDataURL(). Canvas sử dụng hình ảnh mà người dùng của tôi đã tải lên trang web, được lưu trữ trên một máy khác và tên miền phụ farm1.domain.com.canvas.toDataURL() gây ra lỗi bảo mật

Vấn đề: Khi .toDataURL() được gọi, tôi nhận được lỗi

SECURITY_ERR: DOM Exception 18 

Có một khoảng cách này? Tôi cũng gặp vấn đề tương tự nếu người dùng truy cập trang qua domain.com và hình ảnh được lưu trữ tại www.domain.com.

Attempt:

tôi đã thêm các dòng sau vào httpd.conf trong virtualhost và khởi động lại dịch vụ apache.

Header add Access-Control-Allow-Origin "http://www.domain.com" 
Header add Access-Control-Allow-Origin "http://domain.com" 
Header add Access-Control-Allow-Origin "http://farm1.domain.com" 

tôi vẫn nhận được lỗi tương tự khi truy cập vào hình ảnh được lưu trữ trên www.domain.com từ trang trên domain.com! Có cách nào xung quanh điều này trong KineticJS?

+0

Có thể lặp lại: http://stackoverflow.com/questions/9344548/security-error-with-canvas-todataurl-and-drawimage?rq=1 và http://stackoverflow.com/questions/2390232/ lý do tại sao-do-canvas-todataurl-throw-an-an-exception –

+0

trùng lặp và được trả lời, xem xét các liên quan trong cột bên phải, và đây là [spec] (http://www.w3.org/TR/2011 /WD-html5-20110405/the-canvas-element.html#security-with-canvas-elements) – antejan

+0

Tôi đoán cờ sạch sẽ phải được đặt thành true để tránh lỗi? Điều này có thể được thực hiện trong KineticJS? – Nyxynyx

Trả lời

0

Không có cách nào xung quanh lỗi này. Hình ảnh được tải trong canvas từ một tên miền khác sẽ làm tăng lỗi này khi được thực hiện bởi mọi trình duyệt. Trong trường hợp của bạn, các hình ảnh sẽ được lưu trữ trong cùng một tên miền và bạn sẽ không nhận được ngoại lệ.

+0

Thật lạ khi tôi không thể lưu trữ hình ảnh của mình trong các máy chủ và CDN khác, đặc biệt khi số lượng hình ảnh không thể vừa với một máy chủ ... – Nyxynyx

+0

@ Nyxynyx Rất tiếc, đó là giới hạn bảo mật của phần tử canvas. –

1

Bạn sẽ cần thêm tiêu đề Access-Control-Allow-Origin vào hình ảnh bạn đang tải, không phải cho trang đang tải chúng. Để biết chi tiết về tiêu đề này và trên CORS nói chung, bạn có thể muốn đọc "CORS isn't just for XHR", trong đó thảo luận cụ thể về vấn đề này.