Ms Teams Bot 无法在 iframe 上使用任务模块加载

Question

我目前正在创建 MS 团队机器人，我想使用任务模块来加载我的应用程序登录页面，所以我只是尝试模仿现在加载 YouTube 页面的 sample。 我尝试使用该示例。它使用自适应卡，这是操作代码

    {
      "type": "Action.Submit",
      "title": "YouTube",
      "data": {
        "taskModuleId": "YouTube",
        "type": "task/fetch"
      }
    }

当我点击它时，它正确触发：

  async handleTeamsTaskModuleFetch(context: TurnContext, taskModuleRequest: TaskModuleRequest): Promise<TaskModuleResponse> {

    const cardTaskFetchValue = taskModuleRequest.data.taskModuleId;
    var taskInfo = {url: '', fallbackUrl: ''}; // TaskModuleTaskInfo

    if (cardTaskFetchValue === TaskModuleIds.CustomForm) {
        // Display the CustomForm.html page, and post the form data back via
        // handleTeamsTaskModuleSubmit.
        taskInfo.url = taskInfo.fallbackUrl = 'https://' + this.baseUrl + '/' + TaskModuleIds.CustomForm + '.html';
        this.setTaskInfo(taskInfo, TaskModuleUIConstants.CustomForm);
    } else if (cardTaskFetchValue === TaskModuleIds.YouTube) {
        // Display the CustomForm.html page, and post the form data back via
        // handleTeamsTaskModuleSubmit.
        taskInfo.url = taskInfo.fallbackUrl = 'https://' + this.baseUrl + '/' + TaskModuleIds.YouTube+ '.html';
        this.setTaskInfo(taskInfo, TaskModuleUIConstants.YouTube);
    }

    return Promise.resolve(TaskModuleResponseFactory.toTaskModuleResponse(taskInfo));
  }

我尝试调试返回值

Promise.resolve()

{
    "type": "continue",
    "value": {
        "fallbackUrl": "https://******.asse.devtunnels.ms/YouTube.html",
        "height": 700,
        "title": "YouTube",
        "url": "https://******.asse.devtunnels.ms/YouTube.html",
        "width": 1000
    }
}

当我复制链接并从 chrome 手动加载该页面时，它工作正常，

但是从 MS 团队来看，它只是空白，当我检查 chrome 控制台时，我看到： 无法识别的内容安全策略指令“prefetch-src”。

知道我应该检查与此问题相关的内容吗？或者可能还有其他可能导致它空白的情况？

编辑我想我发现了一个导致另一个问题的线索，我相信我添加了 validDomains，因为我的清单上有它，并且团队工具包似乎自动添加它，但是当我检查它不存在时，当我手动添加它，它弹出一个错误：

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.15/MicrosoftTeams.schema.json",
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "https://${{BOT_DOMAIN}}"
    ],
    "webApplicationInfo": {
        "id": "${{AAD_APP_CLIENT_ID}}",
        "resource": "api://botid-${{BOT_ID}}"
    }
}

但是当我检查它不存在时，当我手动添加它时，它弹出一个错误：

我尝试添加 *.asse.devtunnels.ms，我还添加了 youtube.com，我尝试添加多个组合，但错误仍然存在。有人可以告诉我添加这个的正确方法吗？

编辑2：我终于发现了这个问题，因为我最初使用了打字稿示例，但后来尝试模仿js示例，我做了一些清理/pages dir html文件和js（删除了未使用的文件）解决了这个问题。然而现在的问题是

Answer 1

我只是想分享我解决该问题的方法，最初我认为这是 CSP 的问题。 csp 错误消息仍然存在，但页面加载正常

1. 通过加载 /pages 上可用的所有页面来缩小问题范围，将其加载到 jsfiddle
2. 使用网络上的 MS Teams 来检查开发工具
3. 确保在代码清单和 azure Active Directory 中添加 validDomains（仍在调查中）