HarmonyOS鸿蒙Next中web如何开启防录屏、防截屏？

HarmonyOS鸿蒙Next中web如何开启防录屏、防截屏？

3 回复

可以通过jsbridge注册防截屏的方法传递到web页面中，然后在口令输入页面调用该方法禁止录屏即可。

注册方式参考：[@ohos.web.webview (Webview)-ArkTS API-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/js-apis-webview-V14#registerjavascriptproxy)

防截屏录屏方式参考：应用安全编码实践-隐私与安全-应用质量 - 华为HarmonyOS开发者

setWindowPrivacyMode方法需要添加权限：ohos.permission.PRIVACY_WINDOW 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowprivacymode9

//module.json5
"requestPermissions": [
  {
    "name": "ohos.permission.PRIVACY_WINDOW"
  }
]

// EntryAbility.ets
onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    .....
    AppStorage.setOrCreate('windowStage', windowStage);
  }

// WebDemo.ets
import web_webview from '[@ohos](/user/ohos).web.webview';
import { window } from '@kit.ArkUI';

class JsBridge {
  windowClass: window.Window

  constructor(windowStage: window.WindowStage) {
    this.windowClass = windowStage.getMainWindowSync()
  }

  setPrivacyMode(flag: boolean) {
    this.windowClass.setWindowPrivacyMode(flag);
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage
  @State jsBridge: JsBridge = new JsBridge(this.windowStage)

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.jsBridge,
          name: "jsBridge",
          methodList: ["setPrivacyMode"],
          controller: this.controller
        })
    }
  }
}

// index.html 
<!DOCTYPE html>
<html lang="en">
<body>
<h1>setPrivacyMode</h1>
<button type="button" onclick="callArkTS(true)">禁止截屏</button>
<button type="button" onclick="callArkTS(false)">可以截屏</button>
<script>
    function callArkTS(flag) {
       jsBridge.setPrivacyMode(flag);
   }
</script>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中web如何开启防录屏、防截屏？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT中，可通过Web组件配置防录屏/截屏功能。使用WebConfig的webSettings属性设置：

  1. 防截屏：webConfig.webSettings.screenCapture(false)
  2. 防录屏：webConfig.webSettings.mediaRecording(false)

需在Web组件初始化时配置：

webController.webConfig.webSettings
  .screenCapture(false)
  .mediaRecording(false);

注意：该设置仅针对当前WebView实例生效，系统级截屏/录屏需配合其他安全策略。

在HarmonyOS Next中，可以通过以下方式实现Web页面的防录屏、防截屏功能：

  1. 使用系统安全策略API： 通过调用HarmonyOS的安全管理接口，可以设置窗口的安全标志位：
// 设置窗口禁止截屏
window.setWindowAttributes({
    forbidScreenshot: true
});

// 设置窗口禁止录屏
window.setWindowAttributes({
    forbidRecording: true
});
  1. 使用CSS媒体查询检测： 可以通过CSS检测当前是否处于截屏/录屏状态：
@media screen-capture {
    body {
        display: none !important;
    }
}

  1. 页面内容保护： 对于敏感内容，建议使用Canvas渲染而非DOM元素，增加截屏识别难度。

  2. WebView特殊配置： 如果是嵌入WebView的应用，可以在Native层设置：

webView.setSecure(true);  // 禁止截屏和录屏

注意事项：

  • 这些措施不能完全防止专业设备的物理拍摄
  • 需要合理平衡用户体验和安全需求
  • 部分API需要申请相应权限

建议根据实际安全等级需求选择合适的防护方案组合。

回到顶部