Question

是否可以通过.md以编程方式创建的页面中的MarkdownRemark中执行JavaScript？

我想从EmbedSocial嵌入一个照相馆，该照相馆要求在照相馆下面有一个类名和一个标签。

在.md文件中：

<div class='embedsocial-album' data-ref="abcdefghijklmnopqrstuv123456789"></div>
<script>(function (d, s, id) { var js; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/embedscript/ei.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialScript"));
</script>

这是我的模板文件，其中包含GraphQL查询结果：

<div dangerouslySetInnerHTML={{ __html: post.html }} />

但是我意识到dangerouslySetInnerHTML不执行MD中的JavaScript。

我将如何处理？

Answer 1

对于此用例，我建议使用gatsby-remark-embed-snippet。然后，您可以在图库中添加例如`embed:embedsocial.js`，然后将代码放入名为embedsocial.js的文件中，该文件是代码库的一部分。

能够将Markdown中的JavaScript直接包含在页面中听起来像是一种安全隐患（控制Markdown的任何人都可以将代码注入您的网站）；预先定义的代码段要安全得多。

此外，如果EmbedSocial将来更改其API，则可以在一个地方更新图库的所有实例。

Answer 2

以@ehrencrona关于安全风险的输入（完全忘记了），我查看了embedsocial的脚本，该脚本实际上只是在HTML的头部添加了一个标记。我使用react-helmet添加了script标签，但仅针对模板页面而不是整个应用程序。

从MD执行JavaScript-以编程方式创建的页面

2 个答案: