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

Question

我有什么

我正在使用 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": ""
  },
  { ... }, ...
]

在我的网络应用程序中，我希望有一个“博客帖子” typescript 组件，当访问者在映射到单个帖子的路线上时显示单个帖子。

我定义了一个简单的帖子数据类，如下所示:

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));
        });
    }
}

这一切有什么用？

除此之外，重要的是我有一些变体字符串(帖子正文的 JSON)，它表示我想作为子元素插入到某个 DOM 元素的 HTML 部分。为此，我使用了 [innerHTML] 属性并编写了一个使用 bypassSecurityTrustHtml 将字符串作为安全 HTML 信任的 Angular 管道。

会发生什么？

脚本标签不执行。假设我写了一篇博客文章，其中嵌入了一些东西——在我的例子中，它可能是 Github Gist、Instagram 照片或 Google 相册。我发现这是真的 - 脚本标签不执行 - 以及使用 Javascript 来 circumvent it 的方法，但我想知道 angular 是否有像我正在尝试的那样插入 HTML 的方法。我见过 ComponentFactory 的用法但我不知道这是否是我想要的。我猜这也会阻止我在帖子正文中使用 routerLinks。我可以为帖子正文编写一个子组件，但我该如何动态换出模板？

问题

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

b) 是否有其他方式让脚本运行？

c) 我是否应该为此使用不同的设计模式 - 例如将帖子作为 HTML 提供？

Answer 1

a) 安全性，特别是针对 XSS 的保护 - https://angular.io/docs/ts/latest/guide/security.html

b) 是的，但要非常小心 - https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

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

c) 你能否解析博文并将其保存为安全格式，或者你真的想让任何 js 在你的网站上运行吗？