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

在我的 web 应用程序中，我想要一个“博客帖子”打字稿组件，当访问者在映射到单个帖子的路线上时显示单个帖子。

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

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] 属性并编写了一个Angular Pipe，它使用bypassSecurityTrustHtml 将字符串信任为安全的HTML。

会发生什么？

脚本标签不执行。假设我写了一篇博客文章，其中嵌入了一些东西——就我而言，它可能是 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 在您的网站上运行吗？