Góc thêm "không an toàn" vào url khi cố tải xuống tệp

Question

Tôi có ứng dụng AngularJS nhỏ nơi tôi đang cố gắng mở hình ảnh đã tải lên và đang chạy vào vấn đề mà góc thêm "không an toàn:" ở đầu URL . Tôi đã thêm dòng sau vào cấu hình ứng dụng của tôi để khử trùng URL, nhưng nó không hoạt động đối với tôi:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob:chrome-extension):|data:image|\//); 

Tôi đang sử dụng Angular v1.3.0 vì vậy tôi đang sử dụng tên thuộc tính chính xác. Tôi đang sử dụng Chrome chủ yếu, nhưng tôi có cùng một vấn đề trong các trình duyệt khác. Ngoài ra, phần đầu của hình ảnh của tôi trông giống như sau:

unsafe:data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg... 

Bất kỳ ý tưởng nào tôi bị thiếu trong regex của mình? Cảm ơn bạn trước!

Answer 1

Nếu bạn $compileProvider.imgSrcSanitizationWhitelist() không có tham số regexp, nó sẽ trả lại regexp hiện được xác định.

Chạy mã này vào một góc 1.3.0 trống:

app.config(function ($compileProvider) { 
    console.log($compileProvider.imgSrcSanitizationWhitelist()); // 
}); 

tôi có kết quả này - /^\s*((https?|ftp|file|blob):|data:image\/)/

Và mã hóa base64 JPEG bằng cách sử dụng cơ bản <img ng-src="{{main.src}}"> thực sự hoạt động như bạn có thể nhìn thấy here, và another one với png. Ngoài ra nhìn vào giao diện điều khiển để xem regexp.

Một thử nghiệm tôi đã chạy là để di chuyển data:image/jpeg;base64, ra khỏi chuỗi phạm vi binded và đưa nó trở thành ng-src:

<img ng-src="data:image/jpeg;base64,{{main.src}}">

Như bạn có thể nhìn thấy nó worked là tốt.

Để tạo một câu chuyện dài ngắn - bạn không cần phải xác định regexp trong 1.3.0 trở lên cho dữ liệu: image/*, vì nó được xác định theo mặc định.

Tôi không thể chắc chắn vấn đề là gì, nhưng có thể bạn có định nghĩa khác về imgSrcSanitizationWhitelist ở đâu đó trong mã của bạn hoặc uri dữ liệu bị hỏng bằng cách nào đó.