[Angular] 要在專案中，開啟外部網站連結的方法

-

 

因為一般的windows.open(url) 用法

如果url非專案網站的同網址

就會因為同源政策(Same-origin policy)被擋住



所以要繞過

必須使用DomSanitizer


官網：https://angular.io/guide/security#xss


首先先引用

import { DomSanitizer } from '@angular/platform-browser';
 constructor(   
    private sanitizer: DomSanitizer,
  ) {}



而chatGPT的回應
符合邏輯和語法
但是實際上無法這樣使用

chatGPT的回應(以下程式碼無法使用):
// 信任 URL const trustedUrl = this.sanitizer.bypassSecurityTrustUrl(Url); // 將 SafeUrl 轉換為字串 const urlString = trustedUrl.toString(); // 打開 URL window.open(urlString);


實務上

要做以下調整

在windows.open() 裡面建立protocol和取得bypassSecurityTrustUrl()
這個object的內容


    // 打開信任的 URL
    window.open(
      window.location.protocol +
        '//' +
        (this.sanitizer.bypassSecurityTrustUrl(lOpenUrl) as any)
          .changingThisBreaksApplicationSecurity,
    );


也可以寫成這樣

   // 信任 URL
    const trustedUrl = this.sanitizer.bypassSecurityTrustUrl(Url);

    // 打開信任的 URL
    window.open(
      window.location.protocol +
        '//' +
        (trustedUrl as any).changingThisBreaksApplicationSecurity,
    );



不然網址就會像是這樣
http://localhost:4200/SafaValue%20must%20user%20[property]=binging:%URL



提供摸索後的過程給大家





相關參考 

https://stackoverflow.com/questions/41995986/changingthisbreaksapplicationsecurity-angular2

https://stackoverflow.com/questions/51559673/image-url-still-unsafe-after-i-use-domsanitizer



















留言

張貼留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

-
app.componemt.ts 偵測事件    //  如自動登出功能有bug 則停用以下--------    @ HostListener ( ' window:keyup ' ,  [])    @ HostListener ( ' window:click ' ,  [])    @ HostListener ( ' window:wheel ' ,  [])    @ HostListener ( ' window:mousemove ' ,  [])    resetTimer ()   {      this . authService . notifyUserAction () ;    } authService export   class   AuthService   {    isLoggedIn   =   false ;    //  ! 閒置登出時間請更改這參數的數字    endtimeSet   =   30 ;    //  這邊讓單位變成分鐘秒    endTime   =   this . endtimeSet   *   60 ;    //  store the URL so we can redirect after logging in    redirectUrl :   string ;    constructor ( private   router :   Router )   {}    //  偵...
閱讀完整內容

[Angular Materail] 檔案上傳範例

-
  範例 https://stackblitz.com/edit/angular-material-file-input-with-form-field?file=src%2Fapp%2Fapp.component.ts 來源 https://forum.angular.tw/t/topic/1972/5 html < mat-card >    < p   mat-card-title > Test file input with form field </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < hello  [ name ] = "name" ></ hello >      < mat-form-field   style = "width: 100%;" >        < mat-label > File matInput </ mat-label >        < button   mat-icon-button   matPrefix  ( click ) = "f_input.click()" >          < mat-icon > attach_file </ mat-icon >        </ button >  ...
閱讀完整內容

[Angular Material] 搜尋式下拉選單範例

-
  範例 https://stackblitz.com/edit/filter-select 來源 https://forum.angular.tw/t/topic/1722/4 HTML < mat-card >    < p   mat-card-title > Angular Material Select With Filter </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < mat-form-field   style = "width: 100%;" >        < mat-label > Pick a language </ mat-label >        < mat-select  [ formControl ] = "control" >          < mat-option   disabled >            < input   type = "text"   matInput  [ formControl ] = "filter"   placeholder = "Filter..." >          </ mat-option > ...
閱讀完整內容