首页 > 其他分享 >Trusted Types API

Trusted Types API

时间:2024-04-30 23:11:07浏览次数:24  
标签:const content strHTML API Types Trusted

Trusted Types API: 锁定 DOM API 的不安全部分,以防止客户端跨站脚本(XSS)攻击


  • untrusted

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Trusted Types API</title>
  </head>
  <body>
    <strong>Trusted Types API</strong>
    <hr />
    <div class="content"></div>

    <script>
      const content = document.querySelector('.content');

      const strHTML = `<div>
        <p>This is a trusted string.</p>
        <img src="https://via.placeholder.com/350x150" alt="placeholder image" />
      </div>`;

      content.innerHTML = strHTML;
    </script>
  </body>
</html>

  • trusted

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Trusted Types API</title>
  </head>
  <body>
    <strong>Trusted Types API</strong>
    <hr />
    <div class="content"></div>

    <script>
      const content = document.querySelector('.content');

      const strHTML = `<div>
        <p>This is a trusted string.</p>
        <img src="https://via.placeholder.com/350x150" alt="placeholder image" />
      </div>`;

      const entityMap = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
        '/': '&#x2F;',
      };
      const escapedStrHTML = trustedTypes.createPolicy('myPolicy', {
        createHTML: (input) => input.replace(/[&<>"'\/]/g, (char) => entityMap[char]),
      });

      const trustedHTML = escapedStrHTML.createHTML(strHTML);
      content.innerHTML = trustedHTML;
    </script>
  </body>
</html>

标签:const,content,strHTML,API,Types,Trusted
From: https://www.cnblogs.com/chlai/p/18168859

相关文章

  • THUSC2024 & APIO2024 游记
    第二次联赛以上的比赛。Day-nlxs突然通知:从五月七日开始要去镇海中学集训......
  • Python调用Graylog APi 分析401错误登录日志
    ret_lst处理完成后是一个list,内容如下:[{'c_ip':'10.10.202.139','uname':'ee'},{'c_ip':'10.10.202.139','uname':'tt'},{'c_ip':'192.168.195.131','uname......
  • Web Audio API 第6章 高级主题
    高级主题这一章涵盖了非常重要的主题,但比本书的其他部分稍微复杂一些。我们会深入对声音添加音效,完全不通过任何音频缓冲来计算合成音效,模拟不同声音环境的效果,还有关于空3D空间音频。重要理论:双二阶滤波器一个滤波可以增强或减弱声音频谱的某些部分。直观地,在频域上它可......
  • Barcode Detection API
    BarcodeDetectionAPI:用于检测图像中的条形码和二维码//创建新检测器constbarcodeDetector=newBarcodeDetector({formats:["qr_code"],});//检查支持的类型BarcodeDetector?.getSupportedFormats().then((supportedFormats)=>{supportedFormats.forEach(......
  • TypeScript入门5:模块化(导入导出)
    1.概述2.语法3.避免命名冲突4.默认导入导出......
  • simpread-课程 21:API 项目重构
    项目结构重构1.1Electric.DbMigrator存在的问题我们先来看下,后台API项目的目录结构。其中Electric.DbMigrator,这个项目作用是用来做数据库迁移的,但是同时也会被其他项目引用,还有这个项目类型还是WebAPI类型的。所以存在以下的几个问题:1、项目功能重合:数据库迁移和数......
  • TypeScript入门3:接口、多态
    //接口:通常情况下,接⼝中只会包含属性和⽅法的声明,⽽不包含具体的实现细节,具体的细节由其实现类完成interfacePerson9{id:number;name:string;age:number;introduce():void;}//实现类中,需要包含接⼝属性的赋值逻辑,以及接⼝⽅法的实现逻辑classStudent9im......
  • TypeScript入门2:类、继承、访问修饰符
    classPerson{//实例属性id:number;name:string;age:number=18;//构造函数constructor(id:number,name:string){this.id=id;this.name=name;}//实例方法introduce():string{return`hello,Iam${this.name},and......
  • URL Pattern API
    URLPatternAPI创建URL模式匹配器。这些模式能够与完整的URL或URL的各个组成部分进行匹配模式语法基于path-to-regexp库。模式可包含:将被精确匹配的文字字符串。匹配任何字符的通配符(/posts/*)。命名组(/books/:id),提取匹配URL的一部分。非捕获组(/books{......
  • TypeScript入门1:注释、变量常量、数据类型、函数
    console.log('hits');//声明变量leta:number=10;//声明常量constb:number=20;//类型推断:如果⼀个变量或常量的声明包含了初始值,TS便可以根据初始值进⾏类型推断,此时可以不显式指定其类型letc=60;console.log(typeofc);//number//数字类型:整数和浮点......