如何限制Azure Function仅允许同计划下Azure Web App的HTML页面调用？

嘿，这个需求我刚好处理过几次，给你几个实用的方案，按安全性和易用性排序，你可以根据自己的场景选：

因为你的Web App和Function App共享同一个App Service Plan，Web App的出站IP是固定的（除非你用弹性缩放的高级Plan，但即使缩放，出站IP范围也是可预知的），直接给Function App设置IP白名单就能限制只有Web App能调用：

• 第一步：获取Web App的出站IP
  登录Azure门户，找到你的Web App，进入属性页面，复制「出站IP地址」列表里的所有IP（多个IP用逗号分隔）。
• 第二步：配置Function App的访问限制
  进入Function App的网络 -> 访问限制，点击「添加规则」：
  • 选择「允许」，优先级设为1（确保比默认的拒绝规则优先级高）
  • 在「IP地址范围」里粘贴刚才复制的Web App出站IP
  • 保存规则即可

补充：如果你的App Service Plan是弹性缩放的，出站IP可能会增加，建议定期更新白名单；或者更稳妥的方式是把两个App都集成到同一个虚拟网络（VNet），然后在Function App的访问限制里允许VNet内的流量，这样不管IP怎么变都能正常访问。

这种方式不仅能限制只有Web App发起的请求，还能校验用户身份，安全性拉满：

• 第一步：为Function App注册Azure AD应用
  在Azure Active Directory里注册一个新应用，记录下客户端ID和租户ID。
• 第二步：启用Function App的Easy Auth
  进入Function App的身份验证页面，点击「添加身份提供者」，选择「Microsoft」：
  • 关联刚才注册的AD应用，设置「未经过身份验证的请求」为「HTTP 401 未授权」
  • 保存配置
• 第三步：配置Web App并修改前端代码
  同样给Web App启用Easy Auth（用同一个AD租户），这样用户访问Web App时会自动完成身份验证。然后在前端JavaScript里获取令牌并携带到请求中：

  // 获取当前用户的访问令牌
  async function getAccessToken() {
    const response = await fetch('/.auth/me');
    const data = await response.json();
    return data[0].access_token;
  }
  
  // 调用Function App
  async function callFunction() {
    const token = await getAccessToken();
    const response = await fetch('https://your-functionapp.azurewebsites.net/api/your-function', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify({ key: 'value' })
    });
    const result = await response.json();
    console.log(result);
  }
  

这个方案是浏览器端限制（CORS）+ 服务器端密钥验证的组合，适合快速上线但对安全性要求不是极高的场景：

• 第一步：配置Function App的CORS
  进入Function App的CORS页面，添加你的Web App域名（比如https://your-webapp.azurewebsites.net），取消「允许所有来源」的勾选，保存配置。
• 第二步：获取Function App的API密钥
  进入Function App的密钥页面，生成一个主机级或者函数级的密钥，复制下来。
• 第三步：修改Web App的前端代码
  在发起请求时，把API密钥放到请求头里：

  fetch('https://your-functionapp.azurewebsites.net/api/your-function', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-functions-key': 'your-api-key-here'
    },
    body: JSON.stringify({ key: 'value' })
  })
  .then(response => response.json())
  .then(data => console.log(data));
  

注意：CORS只是阻止浏览器的跨域请求，服务器端的恶意请求还是可以绕过，所以API密钥是必须的，二者搭配才能起到限制作用。

内容的提问来源于stack exchange，提问作者TOMMY WANG