Устранение ошибки «net::ERR_CLEARTEXT_NOT_PERMITTED» при веб-разработке

При разработке веб-приложений часто возникают ошибки. Одной из таких ошибок является ошибка «net::ERR_CLEARTEXT_NOT_PERMITTED», которая возникает, когда веб-страница пытается выполнить HTTP-запрос вместо HTTPS. Эта ошибка распространена в современных веб-браузерах и платформах, таких как Android и iOS, в которых приоритет отдается безопасным соединениям. В этой статье мы рассмотрим несколько способов устранения этой ошибки, а также приведем примеры кода.

Метод 1. Включение HTTPS
Наиболее рекомендуемое решение — включить HTTPS для вашего веб-приложения. HTTPS шифрует связь между клиентом и сервером, обеспечивая безопасное соединение. Чтобы включить HTTPS, вам необходимо получить сертификат SSL/TLS и соответствующим образом настроить веб-сервер. Вот пример настройки HTTPS в Node.js с использованием Express:

const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();
// Your app configuration
const serverOptions = {
  key: fs.readFileSync('path/to/private.key'),
  cert: fs.readFileSync('path/to/certificate.crt')
};
https.createServer(serverOptions, app).listen(443);

Метод 2: разрешить трафик открытого текста (не рекомендуется)
Если включение HTTPS невозможно для вашей среды разработки или конкретного варианта использования, вы можете разрешить трафик открытого текста. Однако важно отметить, что этот метод не рекомендуется использовать в производственных средах, поскольку он ставит под угрозу безопасность соединения. В Android вы можете разрешить трафик в виде открытого текста, добавив следующий атрибут в тег приложения в файле AndroidManifest.xml:

<application
    ...
    android:usesCleartextTraffic="true">
    ...
</application>

Метод 3. Используйте конфигурацию сетевой безопасности (Android).
Для приложений Android, ориентированных на уровень API 24 и выше, вы можете использовать конфигурацию сетевой безопасности, чтобы разрешить определенные домены или обойти ограничения трафика в виде открытого текста. Создайте файл network_security_config.xml в каталоге res/xml и добавьте следующий код:

<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">example.com</domain>
    </domain-config>
</network-security-config>

Метод 4: Транспортная безопасность приложений (iOS)
В приложениях iOS функция App Transport Security (ATS) обеспечивает безопасные соединения. Чтобы обойти ATS и разрешить трафик в открытом виде, добавьте следующую пару ключ-значение в файл Info.plist вашего приложения:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Ошибка «net::ERR_CLEARTEXT_NOT_PERMITTED» указывает на то, что веб-страница пытается выполнить небезопасный HTTP-запрос в безопасном контексте. Следуя методам, описанным в этой статье, вы можете устранить эту ошибку и обеспечить безопасный обмен данными между вашим веб-приложением и клиентом. Не забудьте отдать приоритет HTTPS для повышения безопасности в ваших проектах веб-разработки.