Ionic 拒绝在框架中显示“https://withpersona.com/”，因为它将“X-Frame-Options”设置为“拒绝”

Question

最近我一直在使用 Persona KYC 实施我的 Ionic 应用程序。但我仍然遇到集成问题。当我在 Ionic 中执行 javascript 代码时，出现标题中提到的错误。如果有人可以帮助我和社区解决这个问题，那就太好了。

脚本：

function openClient(uid) {
const client = new Persona.Client({
    templateId: 'itmpl_KxEjwiJXJMntb25dJXdrBnTP',
    environmentId: 'env_gQDYrnzBZfXSiPWWdj4VSRGo',
    referenceId: uid,
    onReady: () => client.open(),
    onComplete: ({ inquiryId, status, fields }) => {
        console.log(`Completed inquiry ${inquiryId} with status ${status}`);
    }
 });
}
function cancelClient() { client.cancel(true); }

调用 javascript 函数的 Typescript 方法：

declare var openClient; 
async openVerifyIdentityModal() {
  if (!this.verifyIdentity) {
    await openClient(this.auth.currentUser.uid);
    await Preferences.set({ key: "verifyidentity", value: "true" });
  }
}

Answer 1

来自《Persona》的 Ed。感谢您分享这一点 - 我要求我们的开发团队提供一些线索。这是他们的建议：

错误：ReferenceError：使用next.js时未定义self

错误：拒绝在框架中显示“https://withpersona.com/”，因为它将“X-Frame-Options”设置为“拒绝”

ReferenceError：使用 next.js 时未定义 self Persona JS SDK 不支持服务器渲染。添加以下代码片段：

    TypeScript

import dynamic from "next/dynamic";

export const PersonaInquiry = dynamic(
  () => import('persona').then((module) => module.Inquiry),
  {ssr: false}
);

拒绝在框架中显示“https://withpersona.com/”，因为它将“X-Frame-Options”设置为“deny”

这意味着什么 此错误消息是当您使用嵌入式流程集成 Persona 时 Persona 提供的安全功能导致的。

Persona 允许您通过白名单指定哪些域可以加载嵌入流。您应该仅指定嵌入角色流的域。然后，潜在的攻击者将被阻止在其域中嵌入和加载您的流程。

如果您看到此错误，则意味着正在加载的嵌入流的域不在允许列表中。

如何修复 如果您看到此错误，请转到角色仪表板中的嵌入式流集成页面，然后找到“步骤 3 配置允许的域”。在这里，您将看到域白名单。

确保：

1. 您尝试从中加载嵌入流的域（以及您在其中看到错误消息的域）位于域白名单中。
2. 域白名单中的域拼写正确且格式正确。注意：域名不应包含 URL 的 http:// 或 https:// 部分。

如果您正在测试，请注意：

• 如果您想在本地主机上加载嵌入式流，则必须使用指向您的沙盒环境的嵌入式流。无法在本地主机上加载指向生产环境的嵌入式流。 如果您有更复杂的设置，请注意：
• 如果您的嵌入流加载到的网页上，而该网页本身又作为 iframe 加载到另一个父网页上，则必须通过设置 JS SDK 中的frameAncestors 选项来指定所有父源。详情请参阅参数。

我们还更新了支持文档，以便为您提供有关在哪里找到此错误消息的解决方案的见解：

https://docs.withpersona.com/docs/troubleshooting-common-errors

如果建议的修复无法解决错误，请通过 [电子邮件受保护] 联系我们的团队。

谢谢， 埃德