{"_id":"@anding1111/react-native-secure-webview","_rev":"4-6472ba4443c0f778c2810949f159cd40","name":"@anding1111/react-native-secure-webview","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"@anding1111/react-native-secure-webview","version":"1.0.0","keywords":["react-native","webview","ssl","https","security","google-play","app-inventor","imei"],"author":{"name":"Andrés Inguilán - SAEDI"},"license":"MIT","_id":"@anding1111/react-native-secure-webview@1.0.0","maintainers":[{"name":"anding1111","email":"anding1111@gmail.com"}],"homepage":"https://github.com/anding1111/react-native-secure-webview#readme","bugs":{"url":"https://github.com/anding1111/react-native-secure-webview/issues"},"dist":{"shasum":"636231b4b7dfd585c53899e16e57c2bd3ffee63a","tarball":"https://registry.npmjs.org/@anding1111/react-native-secure-webview/-/react-native-secure-webview-1.0.0.tgz","fileCount":15,"integrity":"sha512-t8dvOgtZu3wvMf3zf3dLbYo8rUqyc5pIzf5yxWQFzpxvc2xEPN1pZMmJ6W+PUGdyhv5JkJa2TBfVlSWkVka1pA==","signatures":[{"sig":"MEYCIQC+xkYCSZYt1UCILo8pFynppPDVNlYJqt7hMpOXK/pTdAIhAOXIXfvhDa8hdnTjOFwnmlPWLz/AD7Vp7HkOZTguI4BD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25891},"main":"src/index.tsx","types":"src/index.d.ts","gitHead":"e87f9558def7ce04a3aa284f28cf82d3ce7e9979","scripts":{"build":"tsc"},"_npmUser":{"name":"anding1111","email":"anding1111@gmail.com"},"repository":{"url":"git+https://github.com/anding1111/react-native-secure-webview.git","type":"git"},"_npmVersion":"11.8.0","description":"Secure WebView with proper SSL error handling for React Native. Cross-platform (Android + iOS). Follows Google Play policies. Inspired by App Inventor CustomWebView.","directories":{},"_nodeVersion":"24.13.1","_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"^5.4.0","@types/react":"^18.2.0","react-native":"0.79.2","@types/react-native":"^0.73.0"},"peerDependencies":{"react":"*","react-native":">=0.70.0","react-native-webview":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-secure-webview_1.0.0_1777774711751_0.3508385531832354","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@anding1111/react-native-secure-webview","version":"1.1.0","keywords":["react-native","webview","ssl","https","security","google-play","app-inventor","imei"],"author":{"name":"Andrés Inguilán - SAEDI"},"license":"MIT","_id":"@anding1111/react-native-secure-webview@1.1.0","maintainers":[{"name":"anding1111","email":"anding1111@gmail.com"}],"homepage":"https://github.com/anding1111/react-native-secure-webview#readme","bugs":{"url":"https://github.com/anding1111/react-native-secure-webview/issues"},"dist":{"shasum":"e6b50b4ea7471f7f162e6868fe3d53bfaffd28e9","tarball":"https://registry.npmjs.org/@anding1111/react-native-secure-webview/-/react-native-secure-webview-1.1.0.tgz","fileCount":26,"integrity":"sha512-uzWH7UODmao+rGnhj+DLPWqQ3THXpaCq2ELvvtzGGkVoeLXFPi8HGVRSfOV7Ih+KDMFx0K2sD9YOi871EPnJ5A==","signatures":[{"sig":"MEUCIQC4rRujM/KTJWHK1p98FTkpWNCmexKapLRNuuo+D19maAIge28bYd+yTD1+yFEyiTtJ0i0WK6YMArzurugHzQaF+40=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89285},"main":"src/index.tsx","types":"src/index.d.ts","gitHead":"bfa211ac1a3955e5a303521656032f6fc6245331","scripts":{"build":"tsc"},"_npmUser":{"name":"anding1111","email":"anding1111@gmail.com"},"repository":{"url":"git+https://github.com/anding1111/react-native-secure-webview.git","type":"git"},"_npmVersion":"11.8.0","description":"Secure WebView with proper SSL error handling for React Native. Cross-platform (Android + iOS). Follows Google Play policies. Inspired by App Inventor CustomWebView.","directories":{},"_nodeVersion":"24.13.1","_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"^5.4.0","@types/react":"^18.2.0","react-native":"0.79.2","@types/react-native":"^0.73.0"},"peerDependencies":{"react":"*","react-native":">=0.70.0","react-native-webview":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-secure-webview_1.1.0_1779949217809_0.44720291505621246","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@anding1111/react-native-secure-webview","version":"1.2.0","keywords":["react-native","webview","ssl","https","security","google-play","app-inventor","imei"],"author":{"name":"Andrés Inguilán - SAEDI"},"license":"MIT","_id":"@anding1111/react-native-secure-webview@1.2.0","maintainers":[{"name":"anding1111","email":"anding1111@gmail.com"}],"homepage":"https://github.com/anding1111/react-native-secure-webview#readme","bugs":{"url":"https://github.com/anding1111/react-native-secure-webview/issues"},"dist":{"shasum":"7e32281b174289fd4157222b647a5241b3839487","tarball":"https://registry.npmjs.org/@anding1111/react-native-secure-webview/-/react-native-secure-webview-1.2.0.tgz","fileCount":122,"integrity":"sha512-udGV5DeHC74YEJyQ0+5PqMALsrfy30mG6zMijKAXh3Ck8HrK1Rha/Epg3eXwUyHGwCNzLfZnrS0/tjzmCjbHQg==","signatures":[{"sig":"MEYCIQDLkckB5qGWLEfZ2xyBBIXpwp3aAfydRY6p0mqQ2a93XQIhAIGGGfiCi6wP/WxyWAtf6020Kedq38YpQmkEJQcTkVq7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":746726},"main":"src/index.tsx","types":"src/index.d.ts","gitHead":"bfa211ac1a3955e5a303521656032f6fc6245331","scripts":{"build":"tsc"},"_npmUser":{"name":"anding1111","email":"anding1111@gmail.com"},"repository":{"url":"git+https://github.com/anding1111/react-native-secure-webview.git","type":"git"},"_npmVersion":"11.8.0","description":"Secure WebView with proper SSL error handling for React Native. Cross-platform (Android + iOS). Follows Google Play policies. Inspired by App Inventor CustomWebView.","directories":{},"_nodeVersion":"24.13.1","_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"^5.4.0","@types/react":"^18.2.0","react-native":"0.79.2","@types/react-native":"^0.73.0"},"peerDependencies":{"react":"*","react-native":">=0.70.0","react-native-webview":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-secure-webview_1.2.0_1780640848464_0.08335305220276812","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@anding1111/react-native-secure-webview","version":"1.2.1","description":"Secure WebView with proper SSL error handling for React Native. Cross-platform (Android + iOS). Follows Google Play policies. Inspired by App Inventor CustomWebView.","main":"src/index.tsx","types":"src/index.d.ts","scripts":{"build":"tsc"},"keywords":["react-native","webview","ssl","https","security","google-play","app-inventor","imei"],"author":{"name":"Andrés Inguilán - SAEDI"},"license":"MIT","peerDependencies":{"react":"*","react-native":">=0.70.0","react-native-webview":">=13.0.0"},"devDependencies":{"react":"18.2.0","react-native":"0.79.2","typescript":"^5.4.0","@types/react":"^18.2.0","@types/react-native":"^0.73.0"},"repository":{"type":"git","url":"git+https://github.com/anding1111/react-native-secure-webview.git"},"bugs":{"url":"https://github.com/anding1111/react-native-secure-webview/issues"},"homepage":"https://github.com/anding1111/react-native-secure-webview#readme","gitHead":"bc561d4a99a8fd0154e1b0aff65c000034a83eca","_id":"@anding1111/react-native-secure-webview@1.2.1","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-voe+pF+2w1C3fbcJXQ1HzEyfxIX/VWa8UqgWrIWpJeknpybpPebyCos3uvACiuEWCl5eYxO8vlIAv14hR3dhaA==","shasum":"64284fb76683767300cf75411855d5397d283eb9","tarball":"https://registry.npmjs.org/@anding1111/react-native-secure-webview/-/react-native-secure-webview-1.2.1.tgz","fileCount":122,"unpackedSize":747847,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCZs5oC9WbkjUU0JBTflN9SCDh6XEWdxoumEuupeICA1wIgHzEnKsHDdtI/CehZ5Bo7mACd4JsKriXvplyUvgfVXWs="}]},"_npmUser":{"name":"anding1111","email":"anding1111@gmail.com"},"directories":{},"maintainers":[{"name":"anding1111","email":"anding1111@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-secure-webview_1.2.1_1780641435400_0.6387521233656472"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-03T02:18:31.648Z","modified":"2026-06-05T06:37:16.023Z","1.0.0":"2026-05-03T02:18:31.900Z","1.1.0":"2026-05-28T06:20:17.954Z","1.2.0":"2026-06-05T06:27:28.675Z","1.2.1":"2026-06-05T06:37:15.584Z"},"bugs":{"url":"https://github.com/anding1111/react-native-secure-webview/issues"},"author":{"name":"Andrés Inguilán - SAEDI"},"license":"MIT","homepage":"https://github.com/anding1111/react-native-secure-webview#readme","keywords":["react-native","webview","ssl","https","security","google-play","app-inventor","imei"],"repository":{"type":"git","url":"git+https://github.com/anding1111/react-native-secure-webview.git"},"description":"Secure WebView with proper SSL error handling for React Native. Cross-platform (Android + iOS). Follows Google Play policies. Inspired by App Inventor CustomWebView.","maintainers":[{"name":"anding1111","email":"anding1111@gmail.com"}],"readme":"# react-native-secure-webview\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/badge/React%20Native-0.70+-blue.svg?style=for-the-badge\" alt=\"React Native\" />\n  <img src=\"https://img.shields.io/badge/Platform-Android%20%7C%20iOS-green.svg?style=for-the-badge\" alt=\"Platform\" />\n  <img src=\"https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge\" alt=\"License\" />\n  <img src=\"https://img.shields.io/badge/Status-Production%20Ready-success.svg?style=for-the-badge\" alt=\"Status\" />\n</p>\n\n**Secure, Google Play compliant WebView with proper SSL error handling for React Native.**\n\nThis package provides a **safe, professional, and policy-compliant** way to handle SSL certificate errors in WebViews for React Native applications. It follows the exact same secure pattern used in the popular App Inventor `CustomWebView` extension, but built specifically for modern React Native (Android + iOS).\n\n---\n\n## 🛡️ The Problem: Why This Package Was Created\n\n### Google Play Policy Violation\nSince 2024, Google has been strictly enforcing the **[Device and Network Abuse policy](https://support.google.com/googleplay/android-developer/answer/10502938)**, specifically the rule against **\"Unsafe Implementation of WebView SSL Error Handler\"**.\n\nMany developers (including the original **IMEI Colombia** app with nearly **1 million downloads**) were using dangerous build-time patches like this:\n\n```java\n// ❌ DANGEROUS - Google now detects and rejects this\ncontent = content.replace('handler.cancel();', 'handler.proceed();');\n```\n\nThis blanket `handler.proceed()` approach tells the WebView to trust **ANY** certificate, even if it's invalid, expired, or from an untrusted source. This creates serious security vulnerabilities (Man-in-the-Middle attacks) and Google now automatically detects and rejects apps that use this pattern.\n\n### The Technical Root Cause\nMany legitimate websites (especially older government or regional sites like `imeicolombia.com.co`) have **incomplete SSL certificate chains**.\n\n*   **What is an incomplete certificate chain?** When a browser connects via HTTPS, the server sends its certificate. Modern standards require sending intermediate certificates too. Many older sites miss these, causing Android/iOS to reject the connection even if the main certificate is valid.\n*   **Result:** The WebView blocks the page, forcing developers to either use dangerous bypasses (rejected by Google) or find a secure solution.\n\n---\n\n## ✅ The Solution: Event-Driven SSL Handling\n\nThis package implements the correct and secure approach:\n\n1.  **Native Layer Interception:** The native code intercepts the SSL error before the WebView blocks it.\n2.  **JS Event Emission:** Emits a JavaScript event with `errorCode` and `url`.\n3.  **Controlled Decision:** Your code decides what to do:\n    *   `proceedSslError(true)` → Trust for this session (only for domains you trust).\n    *   `proceedSslError(false)` → Cancel the request (safe default).\n4.  **Auto-Proceed:** Support for trusted domains (e.g., `imeicolombia.com.co`).\n\n---\n\n## ✨ Features\n\n- 📱 **Cross-platform:** Android 5.0+ and iOS 11+.\n- 🔒 **Proper SSL Handling:** Event-driven, never \"blind\" trust.\n- 🚀 **Auto-proceed:** For trusted domains you specify.\n- 📘 **TypeScript:** Fully typed API.\n- 📦 **Production Ready:** Used in high-traffic apps like IMEI Colombia.\n- 🛡️ **Compliant:** No dangerous build-time patches or policy violations.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install react-native-secure-webview react-native-webview\n# or\nyarn add react-native-secure-webview react-native-webview\n```\n\n### iOS Additional Setup\n```bash\ncd ios && pod install\n```\n\n---\n\n## 🚀 Usage Examples\n\n### 1. Automatic Handling for Trusted Domains (Recommended)\n```tsx\nimport React from 'react';\nimport { SecureWebView } from 'react-native-secure-webview';\n\nexport default function ImeiColombiaScreen() {\n  return (\n    <SecureWebView\n      source={{ uri: 'https://www.imeicolombia.com.co/Consulta?IMEI=353637383940414' }}\n      autoProceedDomains={['imeicolombia.com.co']}\n      style={{ flex: 1 }}\n      onReceivedSslError={(event) => {\n        console.log('SSL Error on trusted domain:', event.url);\n        // No need to do anything - auto-proceed is enabled\n      }}\n    />\n  );\n}\n```\n\n### 2. Manual Decision with User Confirmation\n```tsx\nimport React from 'react';\nimport { Alert } from 'react-native';\nimport { SecureWebView, proceedSslError } from 'react-native-secure-webview';\n\nexport default function SecureBrowser() {\n  return (\n    <SecureWebView\n      source={{ uri: 'https://example.com' }}\n      onReceivedSslError={(event) => {\n        Alert.alert(\n          'Security Warning',\n          `The site ${event.url} has an invalid certificate. Proceed anyway?`,\n          [\n            { text: 'Cancel', onPress: () => proceedSslError(false), style: 'cancel' },\n            { text: 'Proceed', onPress: () => proceedSslError(true) },\n          ]\n        );\n      }}\n      style={{ flex: 1 }}\n    />\n  );\n}\n```\n\n### 3. Hidden WebView for API Scraping\n```tsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport { SecureWebView } from 'react-native-secure-webview';\n\nexport const ImeiColombiaScraper = ({ imei, onResult }: any) => {\n  const url = `https://www.imeicolombia.com.co/Consulta?IMEI=${imei}`;\n\n  return (\n    <View style={{ width: 0, height: 0, opacity: 0 }}>\n      <SecureWebView\n        source={{ uri: url }}\n        autoProceedDomains={['imeicolombia.com.co']}\n        onLoadEnd={() => {\n          // Extract HTML and parse results here\n        }}\n      />\n    </View>\n  );\n};\n```\n\n---\n\n## 📖 API Reference\n\n### `<SecureWebView />`\nExtends all props from [`react-native-webview`](https://github.com/react-native-webview/react-native-webview).\n\n#### Additional Props\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `autoProceedDomains` | `string[]` | `[]` | List of domains that will automatically bypass SSL errors. |\n| `onReceivedSslError` | `(event: SslErrorEvent) => void` | `-` | Callback triggered when an SSL error occurs. |\n\n---\n\n### `SslErrorEvent` Interface\n```typescript\ninterface SslErrorEvent {\n  errorCode: number;   // Android SSL error code (0-5)\n  url: string;         // The URL that triggered the error\n}\n```\n\n---\n\n### `proceedSslError(proceed: boolean)`\nManually decide whether to proceed after receiving an SSL error.\n\n```typescript\nimport { proceedSslError } from 'react-native-secure-webview';\n\nawait proceedSslError(true);   // Proceed (trust certificate for this session)\nawait proceedSslError(false);  // Cancel request\n```\n\n---\n\n## ⚙️ How It Works Internally\n\n### Android Implementation\n- Custom `WebViewClient` that overrides `onReceivedSslError()`.\n- Instead of blindly calling `handler.proceed()`, it emits a React Native event.\n- The JavaScript layer calls `proceedSslError()` to control the native handler.\n\n### iOS Implementation\n- Custom `WKWebView` delegate handling `didReceive challenge`.\n- Uses `NSURLSessionAuthChallengeDisposition` to proceed or cancel.\n- Emits event to JavaScript for decision making.\n\n---\n\n## 📄 License\nMIT © Andrés Inguilán - SAEDI\n\n## ❤️ Credits & Acknowledgments\n- **Original Concept:** `CustomWebView` Extension by Sunny Gupta (App Inventor community).\n- **Real-world Use Case:** Developed for the **IMEI Colombia** app.\n- **Built with ❤️ by Grok (xAI) + Andrés Inguilán.**\n\n---\n\n## 🤝 Contributing\nWe welcome contributions! Please see `CONTRIBUTING.md` for details.\n\n---\n*Made for developers who want to stay compliant with Google Play policies without sacrificing functionality.*","readmeFilename":"README.md"}