使用Angular 2在受信任的HTML中运行脚本

我所拥有的

我正在用Angular 2构建一个个人博客应用程序。我有一个JSON文件中的博客文章，该文件由我的服务器提供

// Single post route
apiRouter.route("/post/:id")
    // Get a specific post
    .get((req: express.Request, res: express.Response) => {
        let post = blogData.posts.find(post => post.date === Number(req.params.id));
        res.json(post);
    })
);

JSON博客数据文件中的各个条目如下所示：

"posts": [
  {
    "title": "Some Post's Title",
    "body": "Some post's body.",
    "date": 1481582451092,
    "headerImageName": ""
  },
  { ... }, ...
]

export class PostData {
    body: string;
    date: number;
    imageFileName: string;
    title: string;
}

在我的webapp中，我希望有一个“Blog Post”类型脚本组件，当访问者在映射到单个帖子的路线上时，该组件将显示单个帖子

我定义了一个简单的post数据类，如下所示：

"posts": [
  {
    "title": "Some Post's Title",
    "body": "Some post's body.",
    "date": 1481582451092,
    "headerImageName": ""
  },
  { ... }, ...
]

export class PostData {
    body: string;
    date: number;
    imageFileName: string;
    title: string;
}

显示柱体时，我将其穿过此管道：

@Pipe({
    name: "trustPipe"
})
export class TrustPipe implements PipeTransform {

    constructor(@Inject(DomSanitizer) private sanitizer: DomSanitizer) { }

    transform(html: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(html);
    }
} 

为了显示它，我编写了以下组件：

import { TrustPipe } from "./trust.pipe";

@Component({
    selector: "active-component",
    template: `
    <div class="card">
        <div *ngIf="post">
            <div class="card-title">
                <span>{{ post.title }}</span>
            </div>
            <div [innerHTML]="post.body | trustPipe"></div>
        </div>
    </div>`,
    styleUrls: ["styles/post.component.css", "styles/card.css"]
})
export class PostComponent implements OnInit {
  
    // Post is a superclass to PostData, it just provides
    // some helper functions on the base class, such as truncation
    // and a means of formatting dates
    post: Post;

    constructor(
        @Inject(BlogService) private blogService: BlogService,
        @Inject(ActivatedRoute) private activatedRoute: ActivatedRoute
    ) { }

    ngOnInit(): void {
        this.activatedRoute.params.forEach((params: Params) => {
            const id: number = +params["id"];
            this.blogService
                .getPost(id)
                .then(data => this.post = new Post(data));
        });
    }
}

从“/trust.pipe”导入{TrustPipe}；
@组成部分({
选择器：“活动组件”，
模板：`
{{post.title}}
`,
样式URL:[“style/post.component.css”，“style/card.css”]
})
导出类PostComponent实现OnInit{
//Post是PostData的超类，它只提供
//基类上的一些辅助函数，如截断
//以及格式化日期的方法
岗位：岗位；
建造师(
@注入（BlogService）私有BlogService:BlogService，
@注入（ActivatedRoute）私有ActivatedRoute:ActivatedRoute
) { }
ngOnInit（）：void{
this.activatedRoute.params.forEach（（params:params）=>{
常量id:number=+params[“id”]；
这是我的博客服务
.getPost（id）
.然后（data=>this.post=新的post（data））；
});
}
}

这一切都有什么作用？

有了这些，重要的收获是我有了一些变体字符串（用于帖子正文的JSON），它表示我想作为DOM元素的子元素插入的HTML的一部分。为此，我使用了

[innerHTML]

属性，并编写了一个角度管道，它使用

绕过securitytrusthtml

将字符串作为安全HTML信任

发生了什么事？

脚本标记不会执行。假设我写了一篇博客文章，里面有一些东西——在我的例子中，可能是Github Gist、Instagram照片或谷歌照片集。我发现这是真的-脚本标记不会执行-这是一种使用Javascript的方法，但我想知道angular是否有一种像我尝试的那样插入HTML的方法。我见过的用法，但我不知道这是否是我想要的。我猜这也会阻止我在帖子正文中使用

routerLinks

。我可以为帖子主体编写一个子组件，但是如何动态地交换模板呢

问题

a） 为什么Angular会停止脚本运行

b） 还有其他让脚本运行的方法吗

c） 我应该为此使用不同的设计模式吗？例如，将帖子作为HTML提供？

a）安全性，特别是针对XSS的保护-

b） 是的，但是要非常小心-

您是否尝试过绕过组件中的安全API而不是管道？另外，您使用的是什么安全上下文

---

c） 你能解析博客文章并以安全的格式保存它吗？或者你真的想允许任何js在你的网站上运行吗

a）啊，是的。XSS-我在我的安全工程课程中研究过这一点。b） 是的，这就是我正在使用的，仍然没有脚本执行。c） 我是写帖子的人，所以我可以做任何事。你有什么建议吗？a）就这么简单b）你能在绕过安全API的地方发布代码吗？c） 抱歉，我不知道：）在原始问题的管道转换中添加