AngularJS เปลี่ยน URL เป็น“ ไม่ปลอดภัย:” ในหน้าส่วนขยาย


186

ฉันกำลังพยายามใช้ Angular กับรายการแอพและแต่ละอันเป็นลิงค์เพื่อดูแอปในรายละเอียดเพิ่มเติม ( apps/app.id):

<a id="{{app.id}}" href="apps/{{app.id}}" >{{app.name}}</a>

ทุกครั้งที่ฉันคลิกลิงก์ใดลิงก์หนึ่งเหล่านี้ Chrome จะแสดง URL เป็น

unsafe:chrome-extension://kpbipnfncdpgejhmdneaagc.../apps/app.id

ที่ไหนที่ไม่unsafe:มาจากไหน?


1
โปรดทราบว่าคุณควรใช้ng-hrefในกรณีนี้ไม่ใช่เพียงแค่href: docs.angularjs.org/api/ng/directive/ngHref
hartz89

ฉันใช้วิธีการควบคุมfunction gotoURL(url) { $window.location.href = url; }
Todd Hale

คำตอบ:


362

คุณต้องเพิ่มโปรโตคอล URL ลงในรายการที่อนุญาตของ Angular อย่างชัดเจนโดยใช้นิพจน์ทั่วไป เพียงhttp, https, ftpและmailtoมีการใช้งานโดยค่าเริ่มต้น เชิงมุมจะคำนำหน้า URL ที่ไม่อนุญาตพิเศษกับเมื่อใช้โปรโตคอลเช่นunsafe:chrome-extension:

สถานที่ที่ดีในการอนุญาตchrome-extension:โปรโตคอลจะอยู่ในบล็อคการกำหนดค่าของโมดูลของคุณ:

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

ขั้นตอนเดียวกันยังนำไปใช้เมื่อคุณจำเป็นต้องใช้โปรโตคอลเช่นและfile:tel:

โปรดดูเอกสารประกอบ AngularJS $ compileProvider APIสำหรับข้อมูลเพิ่มเติม


11
ใน Angular 1.2 ชื่อวิธีการกลายเป็น$compileProvider.aHrefSanitizationWhitelist
Mart

6
ค่าเริ่มต้น imgSrcSanitizationWhitelist Angular 1.2-rc2 คือ/^\s*(https?|ftp|file):|data:image\//การเข้าถึงระบบไฟล์ในท้องถิ่นสำหรับแอปพลิเคชันที่บรรจุโครเมี่ยม|filesystem:chrome-extension:ควรเพิ่มในตอนท้ายของ regex
Henning

29
โปรดทราบว่าใน Angular 1.2 มีสองวิธี - หนึ่งวิธีสำหรับลิงก์ (aHrefSanitizationWhitelist) และอีกหนึ่งสำหรับรูปภาพ (imgSrcSanitizationWhitelist) นี่ทำให้ฉันติดอยู่พักหนึ่ง
mdierker

1
สำหรับแอป Chrome Packaged คุณจะต้องเพิ่ม|blob:chrome-extension:ที่ส่วนท้าย
adam8810

1
หมายเหตุโปรโตคอลไฟล์นั้นแตกต่างจากโปรโตคอล blob: $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob|ftp|mailto|chrome-extension):/);
Arnaud Leyder

56

ในกรณีที่ทุกคนมีปัญหากับภาพเช่นนี้:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);

ฉันพยายามใช้นิพจน์ทั่วไปสำหรับรายการสีขาวภาพหน้าจอของภาพที่ฉันจับด้วย html2canvas ตอนนี้ไม่มีข้อผิดพลาดที่ระบุว่าไม่ปลอดภัย: ข้อมูล; แต่ภาพไม่ได้ถูกจับ ความคิดใดที่ฉันจะใช้นิพจน์ทั่วไป? ฉันกำลังจับภาพ / png ในฐานะ base64 url ตอนนี้ html ดูเหมือนว่า: <img ng-src = "data:," class = "img-responsive" src = "data:,"> แทนที่จะเป็น URL
เบส

6

หากคุณต้องการเมลโทรและ sms ใช้สิ่งนี้:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);

2

Google Chrome Content Security Policy (CSP)ต้องใช้นามสกุลของตนที่จะให้ความร่วมมือกับ

CSPคุณจำเป็นต้องปรับเปลี่ยนนามสกุลของคุณเพื่อตอบสนองความต้องการของ

https://developer.chrome.com/extensions/contentSecurityPolicy.html

https://developer.mozilla.org/en-US/docs/Security/CSP

นอกจากนี้ angularJS ยังมีngCspคำสั่งที่คุณต้องใช้

http://docs.angularjs.org/api/ng.directive:ngCsp


ฉันมีคำสั่ง ngCsp อยู่แล้วสำหรับหน้านั้น '<html ng-app = "myApp" ng-csp>' นี่คือ CSP จากรายการของฉัน: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", ฉันต้องเปลี่ยน csp ในรายการหรือไม่
ebi

2
<a href="{{applicant.resume}}" download> download resume</a>


var app = angular.module("myApp", []);

    app.config(['$compileProvider', function($compileProvider) {
         $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);

        }]);

2

สำหรับAngular 2+คุณสามารถใช้DomSanitizer's bypassSecurityTrustResourceUrlวิธี

import {DomSanitizer} from '@angular/platform-browser';

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

    constructor(
        private sanitizer: DomSanitizer){
        this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl(); 
    }
}

สวัสดีคุณช่วยยกตัวอย่างที่ละเอียดมากขึ้นสำหรับสิ่งเดียวกันได้ไหม
Jayesh Choudhary

สวัสดี @JayeshChoudhary คุณช่วยบอกฉันหน่อยได้ไหมว่าคุณกำลังมองหาอะไรโดยเฉพาะและฉันอาจช่วยคุณได้ดีขึ้น
Raman
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.