[解決済み] Angular 2 - EXCEPTION: Error: リソース URL コンテキストで安全でない値が使用されています。
2022-02-18 08:42:33
質問
以下のようなエラーが発生します。
Angular 2 - EXCEPTION: Error: リソース URL コンテキストで安全でない値が使用されています。
起動時にメディアアイテムがすぐに表示されないことに関係があるのでしょうか?あるいは、URLが安全でないことと関係があるのでしょうか?私はそれをサニタイズしようとしています。
export class HomeComponent {
sanitizer: DomSanitizationService;
errorMessage: string;
activeMedia: MediaItem = new MediaItem(0, '', '', '', '', '', '');
constructor(
private mediaStorage: MediaStorageService,
private harvesterService: HarvesterService,
sanitizer: DomSanitizationService) {
this.sanitizer = sanitizer;
// Initial call -
harvesterService.getMediaItems(10, 'type', 'category');
let subscription = harvesterService.initialMediaHarvestedEvent.subscribe(() => {
this.activeMedia = mediaStorage.mediaList[0];
let newURL = this.activeMedia.URL + '?rel=0&autoplay=1';
newURL = newURL.replace('watch?v=', 'v/');
this.activeMedia.URL = newURL; //sanitizer.bypassSecurityTrustUrl(newURL);
console.log(newURL);
});
}
cleanURL(oldURL: string): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustUrl(oldURL);
}
}
テンプレートコードは
<div class="row" >
<iframe
id="video"
class="video"
src="{{ cleanURL(activeMedia.URL) }}"
frameborder="0"
allowfullscreen>
</iframe>
</div>
解決方法は?
UPDATED を変更した後
src="{{cleanURL(activeMedia.URL)}}"
になります。
[src]="cleanURL(activeMedia.URL)"
出ています。ORIGINAL EXCEPTION: Error: 安全なResourceURLが必要ですが、URLを取得しました。
というようにcleanURLメソッド内のコードを変更することで解決しました。
return this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);
の代わりに
return this.sanitizer.bypassSecurityTrustUrl(oldURL);
関連
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み】アンギュラーコンポーネントにサービスを注入しようとするとエラー "EXCEPTION: Can't resolve all parameters for component"、なぜ?
-
[解決済み] Angular EXCEPTION: Http用のプロバイダがありません。
-
[解決済み] 安全でない値」の例外を発生させずに <iframe src="..."> を設定するにはどうしたらよいですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] Angular 2でurlからクエリパラメータを取得する方法は?
-
[解決済み] <img>: Unsafe value used in a resource URL context
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない