Hi Apple engineers! We are making an iOS browser and are planing to deliver a feature that allows enterprise customers to use a MAM key to set a PAC file for proxy. It's designed to support unmanaged device so the MDM based solutions like 'Global HTTP Proxy MDM payload' or 'Per-App VPN' simply don't work. After doing some research we found that with WKWebView, the only framework allowed on iOS for web browsing, there's no API for programmatically setting proxy. The closes API is the WKURLSchemeHandler, but it's for data management not network request interception, in other word it can not be used to handle HTTP/HTTPS request well. When we go from the web-view level to the app level, it seems there's no API to let an app set proxy for itself at an app-level, the closest API is Per-App VPN but as mentioned above, Per-App VPN is only available for managed device so we can't use that as well. Eventually we go to the system level, and try to use Network Extension, but there's still obstacles. It seems Network Extension doesn't directly provide a way to write system proxy. In order to archive that, we may have to use Packet Tunnel Provider in destination IP mode and create a local VPN server to loop back the network traffic and do the proxy stuff in that server. In other word, the custom VPN protocol is 'forward directly without encryption'. This approach looks viable as we see some of the network analysis tools use this approach, but still I'd like to ask is this against App Store Review Guidelines? If the above approach with Network Extension is not against App Store Review Guidelines, I have a further question that, what is the NEProxySettings of NETunnelNetworkSettings for? Is it the proxy which proxies the VPN traffic (in order to hide source IP from VPN provider) or it is the proxy to use after network traffic goes into the virtual private network? If none of the above is considered recommended, what is the recommended way to programmatically set proxy on WKWebView on an unmanaged device (regardless of where the proxy runs, web-view/app/system)?

From a mail app or similar, when opening a webpage in Safari as an external browser, JavaScript on the webpage stops running if Safari goes into the background. Is there a way to prevent this from happening? Sample code for the counter: Behavior: Upon returning from the background, the counter continues for about 7-8 seconds but does not progress further. For example, if Safari is kept in the background for about 20 seconds and then brought back, the counter stops at around 7-8 seconds and only resumes counting after returning to the foreground. Expectation: The counter should continue running even if Safari goes into the background.

Trying to implement my own forward/back buttons for the new SwiftUI WebView and reading the documentation I’m totally lost. What’s the recommended way of implementing forward/back behavior with this component?

Hi, in our app we have a WKWebView with complex web content that is loaded with cachePolicy: .reloadIgnoringLocalCacheData. If the app is in the background for several hours and returns in the foreground we noticed that the system reloads the webpage, but it does so with a cachePoliy returnCacheDataElseLoad. This could break the app if older cache content is present. To reproduce start an app in the simulator (tested with iOS 17.2), put it in the background and via activity monitor stop the processes com.apple.Webkit.WebContent com.apple.Webkit.networking After foreground the reload will happen. Two questions: why is this reload happening after some hours in the background? We haven't seen any crash reports related to this. It mostly happens on one of our test devices (iphone13 with iOS17.2.1). why is the webview reloading with a modified cachePolicy (returnCacheDataElseLoad)? Our temporary fix is to detect this case in "webView:decidePolicyFor navigationAction decisionHandler", cancel the request and reload with modified cachePolicy. Any ideas? Thanks, Heiko Sample code: class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() let config = WKWebViewConfiguration() webView = WKWebView(frame: .zero, configuration: config) webView.uiDelegate = self webView.navigationDelegate = self view.addSubview(webView) let myRequest = URLRequest(url: URL(string: "https://www.apple.com")!, cachePolicy: .reloadIgnoringLocalCacheData) print("request \(myRequest)") webView.load(myRequest) } func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { print("start loading \(String(describing: navigationAction.request.url)), cache:\(navigationAction.request.cachePolicy)") decisionHandler(.allow) } override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() let fullscreen = CGRect.init(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height) webView.frame = fullscreen } }

Is this code invalid on a phone running xcode16 iOS18? Class cls = NSClassFromString(@"WKBrowsingContextController"); SEL sel = NSSelectorFromString(@"registerSchemeForCustomProtocol:"); if ([(id)cls respondsToSelector:sel]) { [(id)cls performSelector:sel withObject:@"http"]; [(id)cls performSelector:sel withObject:@"https"]; } }

myCode is here // titleScript = "document.querySelector('#\(rawValue) span')?.textContent" guard let titleResult = try? await webView.evaluateJavaScript(type.titleScript), let title = titleResult as? String else { return } this code has error Thread 1: Swift runtime failure: Unexpectedly found nil while implicitly unwrapping an Optional value but edit Code like this It is works Successful do { ... let titleResult = try await webView.evaluateJavaScript(type.titleScript) let title = titleResult as? String ... } catch { LogManager.log(level: .error, self, #function, error, "title is Invalid : \(type.titleScript)") continue } I don't know why guard let _ = try? is Fail

Background On iOS 18.4 beta, setting a content inset on a WKWebView causes touch events inside the web view to be offset by the content inset amount. In other words, if the web view has a top content inset of 75 points, I must tap 75 points above the intended element for the touch to register correctly. This makes any web content unusable when a content inset is present. A sample app demonstrating the issue is available here: GitHub - iOS18.4-Webview-Bug. The issue does not occur in iOS 18.3 or 18.2. Bug Report The bug has been reported and fixed at WebKit Bug 289715 and also filed as rdar://147075945. Question Will the fix be included in the upcoming iOS 18.4 beta release (Beta 5) or soon thereafter?

Is it possible to open the native app from a web extension? I have tried creating a new tab that uses the app's URL scheme but the UI asking the user to open the app is not shown until the new page UI is dismissed. Creating a tab with an HTTPS URL that the app is setup to handle does not work and always the link in a new tab. I tried sending a message to the app extension and using NSExtensionContext.open(_:completionHandler:) but the URL is not opened and the closure received false, indicating it was not handled. Having the option to link back to the native app would be very useful.

Hi everyone, I’m encountering a critical reliability issue with message passing in my Safari Web Extension on iOS 18.4.1 and iOS 18.5. In my extension, I’m using the standard messaging API. The background script sends a message to the content script using browser.tabs.sendMessage(...), and the content script registers a listener via: browser.runtime.onMessage.addListener(handler); This setup has been working reliably in all prior versions of iOS. However, after updating to iOS 18.4.1 and 18.5, I’ve noticed the following behavior: ✅ The content script is successfully injected, and onMessage.addListener is registered (I see logging confirming this). ✅ The background script sends the message using the correct tabId (also confirmed via logs). ❌ The content script’s onMessage listener is not consistently triggered. ⚠️ This issue is intermittent, sometimes the message is received, sometimes it is silently dropped. ❌ No exceptions or errors are thrown in either script, the message appears to be sent, but not picked up from the content script message listener.

I'm working on a regular website, in which I'm trying to debug using the (MacOS) Safari Development tools. Since updating my Simulator to iOS 16.4, console.log is no longer displayed in the Console. Even when executing it directly in the console (console.log('test');), it's not printed. Now, I've read that this is a feature for debugging in-app browser content (https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/) but can't find the regular web workaround here. TL;DR: No longer see console.log in iOS 16.4 Safari when debugging from my Mac. Thanks in advance for your suggestions!

I recently upgraded my device from IOS 18.4 to IOS 26. My web extension has disapeared from safari. I can see it in Settings > Apps > Safari > Extensions and when I turn it on and re-open safari. I just get a mesasge that says "{extension name} is no longer avaiable". I have tried Manifest V2 and Manifest V3 both yield the same results. The current production extension bundled with the IOS app has the same problem. I can no longer use or test my own extension !? Help please !

Sometimes Safari is rendering the icon for an active extension in its original provided colored representation, other times Safari is applying an overlay color in line with the system's highlight color. This difference can even be seen seen on the Safari Extensions Developer home page: https://developer.apple.com/safari/extensions/images/extensions-hero-large_2x.png You will notice that Grammarly's icon is shown in it's original color format, while the others aren't. Example of extensions where the icon is shown in color: Bitwarden Grammarly 1Password Consent-O-Matic I've compared the source code of Bitwarden and Consent-o-Matic with my own extension and cannot find any differences in the settings or image properties (resolution, DPI, file type, color profile). If I take the exact PNG source files from said open source extensions and replace them in my own source code, these icons show up in full color. Does this perhaps mean there is a bug in Safari's processing of the icons where it fails to overlay the icon with the highlight color in some cases? I and I assume many developers with me would like to understand what determines this difference. Ideally, there is a consistent UX where the end user has the choice between icons in color or highlight color overlay.

I have a Safari Web Extension that successfully receives a message from a webpage and returns a response. I now want to add a user interface to the Safari Web Extension. How do I do this? I have modified the default template code as follow to add an NSAlert for testing. The modal runs, but no alert ever appears, and the code remains stuck at runModal. What is the correct way to add a UI to a webextension? - (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {     id message = [context.inputItems.firstObject userInfo][SFExtensionMessageKey];     NSLog(@"Received message from browser.runtime.sendNativeMessage: %@", message);     NSAlert* alert = [[NSAlert alloc]init];     [alert setMessageText:message[@"request"]];     [alert setInformativeText:@"Hello"];     [alert runModal];     NSExtensionItem *response = [[NSExtensionItem alloc] init];     response.userInfo = @{ SFExtensionMessageKey: @{ @"id": message[@"id"], @"uuid": message[@"uuid"], @"contentType": message[@"contentType"], @"response": message[@"request"] } };     [context completeRequestReturningItems:@[ response ] completionHandler:nil]; } @end

Our app, VitalSource Bookshelf, is an EPUB reader that uses a WKWebView to display book content. The EPUB content format is XHTML and uses namespaces (for the epub:type declaration). On beta 4, the webkit process repeatedly crashes when loading our content. The crash appears to be in the XML parser. Here's what's at the top of the stack trace: 0 WebCore 0x19166a878 WebCore::XMLDocumentParser::startElementNs(unsigned char const*, unsigned char const*, unsigned char const*, int, unsigned char const**, int, int, unsigned char const**) + 4968 1 libxml2.2.dylib 0x19c5a2bd0 xmlParseStartTag2 + 3940 2 libxml2.2.dylib 0x19c59e730 xmlParseTryOrFinish + 2984 3 libxml2.2.dylib 0x19c59d8e4 xmlParseChunk + 708 4 WebCore 0x191668ec8 WebCore::XMLDocumentParser::doWrite(WTF::String const&) + 636 5 WebCore 0x191665b78 WebCore::XMLDocumentParser::append(WTF::RefPtr<WTF::StringImpl, WTF::RawPtrTraits<WTF::StringImpl>, WTF::DefaultRefDerefTraits<WTF::StringImpl>>&&) + 304 6 WebCore 0x190105db0 WebCore::DecodedDataDocumentParser::appendBytes(WebCore::DocumentWriter&, std::__1::span<unsigned char const, 18446744073709551615ul>) + 268 7 WebCore 0x190861c3c WebCore::DocumentLoader::commitData(WebCore::SharedBuffer const&) + 1488 8 WebKit 0x18e07ca3c WebKit::WebLocalFrameLoaderClient::committedLoad(WebCore::DocumentLoader*, WebCore::SharedBuffer const&) + 52 9 WebCore 0x190869db4 WebCore::DocumentLoader::commitLoad(WebCore::SharedBuffer const&) + 228 10 WebCore 0x1909521e4 WebCore::CachedRawResource::notifyClientsDataWasReceived(WebCore::SharedBuffer const&) + 268 I was able to reproduce this in Safari on beta 4 just by opening the following trivial xhtml file from the file system - it does the same thing it does in our app, which is reloads and crashes several times, followed by the "A problem repeatedly occurred with..." error message. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" epub:prefix="vst: http://vitalsource.com/"><head></head><body class="dash" epub:type="chapter" data-begin-o="0" data-begin-o2="0" data-begin-o3="0" data-o="0" id="eid1844" data-end-o="14703" data-end-o2="14703" data-end-o3="14703"><h2 class="title" data-o="0" id="eid1845" data-out="33"><span class="label" data-o="0" id="eid1846"><span class="label-inner"><b data-o="0" id="eid1847">CHAPTER X</b> </span></span>THE SUBMARINE COAL-MINES</h2></body></html> I've also filed a feedback. But posting here just to raise the visibility - this is critical for us. I think it was introduced in beta 4; that's at least when we first noticed it. It was working in the earlier betas, I just don't remember if I tried beta 3 or not. It happens on iOS, macOS, and iPadOS. This has never been a problem in any earlier release of macOS / iOS.

Hello WebKit Team, I’m writing to ask if iOS provides a native way to intercept AJAX (XMLHttpRequest or fetch) calls inside WKWebView. On Android, this is handled via: shouldInterceptRequest(WebView view, WebResourceRequest request) but iOS currently seems to have no equivalent. We’ve tried: WKURLSchemeHandler → works only for custom schemes URLProtocol with WKProcessPool → unreliable for AJAX in WebView JavaScript injection → partial and unofficial Could you please clarify: Is there a recommended native approach to intercept AJAX requests? If not supported, is it planned for future releases? Any official workaround or guidance? This is critical for debugging, analytics, and compliance in hybrid apps.

On iOS 26 Beta, WKWebView consistently crashes when interacting with pages that use -webkit-user-select: none. This issue does not reproduce in Safari, but only when the same content is loaded inside a WKWebView. Steps to Reproduce: Install iOS 26 Beta. Open a WKWebView that loads a webpage with the following style applied globally: -webkit-user-select: none; Perform the following gesture sequence inside the WKWebView: Double tap anywhere in the web content. On the second tap, keep your finger pressed (do not lift). While still holding the second tap, drag your finger across the screen (pan). This sequence reliably produces the crash. Expected Result: No crash. The gesture should either be ignored or handled gracefully. Actual Result: The app crashes 100% of the time with the following exception: #0 0x000000013f1a0874 in __pthread_kill () #1 0x00000001357522ec in pthread_kill () #2 0x00000001801ad950 in abort () #3 0x00000001802fa26c in __abort_message () #4 0x00000001802ea1a4 in demangling_terminate_handler () #5 0x0000000180077218 in _objc_terminate () #6 0x00000001802f9758 in std::__terminate () #7 0x00000001802fc7c0 in __cxxabiv1::failed_throw () #8 0x00000001802fc7a0 in __cxa_throw () #9 0x000000018009c1bc in objc_exception_throw () #10 0x00000001804f38f8 in +[NSException raise:format:] () #11 0x000000018c5fb570 in -[CALayer setPosition:] () #12 0x0000000185d02414 in -[UIView _backing_setPosition:] () #13 0x00000001867ec978 in -[UIView setCenter:] () #14 0x0000000186666468 in -[_UIEditMenuContentPresentation _displayPreparedMenu:titleView:reason:didDismissMenu:configuration:] () #15 0x0000000186666088 in __54-[_UIEditMenuContentPresentation _displayMenu:reason:]_block_invoke () #16 0x00000001867b3ed4 in -[UIEditMenuInteraction _editMenuPresentation:preparedMenuForDisplay:completion:] () #17 0x0000000186665fb0 in -[_UIEditMenuContentPresentation _displayMenu:reason:] () #18 0x0000000186665de4 in -[_UIEditMenuContentPresentation displayMenu:configuration:] () #19 0x00000001867b3260 in __58-[UIEditMenuInteraction presentEditMenuWithConfiguration:]_block_invoke () #20 0x00000001867b4c98 in __80-[UIEditMenuInteraction _prepareMenuAtLocation:configuration:completionHandler:]_block_invoke () #21 0x000000018653ff80 in __109-[UITextContextMenuInteraction _editMenuInteraction:menuForConfiguration:suggestedActions:completionHandler:]_block_invoke () #22 0x0000000186540448 in __107-[UITextContextMenuInteraction _querySelectionCommandsForConfiguration:suggestedActions:completionHandler:]_block_invoke () #23 0x000000018dba84f8 in WTF::Detail::CallableWrapper<WTF::CompletionHandler<void (IPC::Connection*, IPC::Decoder*)> IPC::Connection::makeAsyncReplyCompletionHandler<Messages::WebPage::RequestDocumentEditingContext, WTF::CompletionHandler<void (WebKit::DocumentEditingContext&&)>>(WTF::CompletionHandler<void (WebKit::DocumentEditingContext&&)>&&, WTF::ThreadLikeAssertion)::'lambda'(IPC::Connection*, IPC::Decoder*), void, IPC::Connection*, IPC::Decoder*>::call () #24 0x000000018dca14cc in WTF::Detail::CallableWrapper<WebKit::AuxiliaryProcessProxy::sendMessage(WTF::UniqueRef<IPC::Encoder>&&, WTF::OptionSet<IPC::SendOption>, std::__1::optional<IPC::ConnectionAsyncReplyHandler>, WebKit::AuxiliaryProcessProxy::ShouldStartProcessThrottlerActivity)::$_1, void, IPC::Connection*, IPC::Decoder*>::call () #25 0x000000018e2d5c54 in IPC::Connection::dispatchMessage () #26 0x000000018e2d6118 in IPC::Connection::dispatchIncomingMessages () #27 0x00000001997f9c58 in WTF::RunLoop::performWork () #28 0x00000001997fa930 in WTF::RunLoop::performWork () #29 0x000000018044d4dc in __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ () #30 0x000000018044d424 in __CFRunLoopDoSource0 () #31 0x000000018044cc0c in __CFRunLoopDoSources0 () #32 0x000000018044bd84 in __CFRunLoopRun () #33 0x0000000180446e24 in _CFRunLoopRunSpecificWithOptions () #34 0x00000001924c19bc in GSEventRunModal () #35 0x00000001862217a8 in -[UIApplication _run] () #36 0x00000001862259d0 in UIApplicationMain () Same issues below. https://developer.apple.com/forums/thread/796799 https://developer.apple.com/forums/thread/796501 https://developer.apple.com/forums/thread/796874 https://developer.apple.com/forums/thread/796686

I'm building a macOS extension that needs to track multi-step navigation chains (A → B → C) to adjust behavior based on where users came from. Current approach: Using webNavigation.onBeforeNavigate to detect intermediate steps, but experiencing issues in Safari that don't occur on Chrome/Firefox/Edge. Questions: Is webNavigation the right API for tracking redirect chains in Safari? Does ITP/Private Browsing affect event delivery? Any alternative approaches recommended? (Safari version 26.0.1) Any guidance appreciated!

I am encountering an issue where we are unable to run or launch Safari Driver in our automation tests using macOS. When attempting to run safaridriver -p 8888 from the terminal, we receive the following error message: ERROR: safaridriver could not launch because it is not configured correctly or you need to authenticate. Re-run safaridriver(1) and pass the '--enable' flag to configure and/or authenticate. For more information, consult the safaridriver(1) man page. Despite running sudo safaridriver --enable as an administrator (even as root), the issue persists. I’ve searched through various online forums and GitHub repositories but couldn’t find a working solution. Some references are: Apple Developer Forum Thread: https://forums.developer.apple.com/forums/thread/762321 GitHub Issue: https://github.com/SeleniumHQ/selenium/issues/11381

Hey Guys My PWA video playback and even youtube videos stopped working after updating iOS to 26.0.1. The video thumnails appear fine and if i try to play the video, it remains stuck. If i restart the phone, the video plays for a second in the PWA and then stops again and entire app gets stuck. Request apple team to fix this issue at the earliest. This is hampering all my iOS users who install the PWA on their device homescreen and use it as app. FYI strangely EVERYTHING WORKS FINE ON iOS SAFARI browser including videos playback If i open it as a web app. so this seems like a specific PWA issue on latest ios 26.0.1

Thank you for supporting me. My environment Device: iPhone 15 Pro OS: iOS 26.0 Public Beta (23A5336a) In iOS 26, three types of tabs were added to Safari. Depending on the option, the behavior of the fixed header and footer can be unstable. *Tab settings can be changed in the iOS Settings app under "Apps -> Safari" > "Tabs." The following behavior differs depending on the tab. Compact When scrolling down, the header and footer shift up by a few pixels. A margin is created between the footer and the URL input field. Bottom Behaves the same as "Compact." Top The header is completely hidden below the URL input field at the top of the screen, leaving a margin below the footer. Below is the sample code to check the operation. <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>固定ヘッダー/フッター + モーダル</title> <style> :root { --header-h: 56px; --footer-h: 56px; } body { margin: 0; font-family: sans-serif; line-height: 1.6; background: #f9fafb; padding-top: var(--header-h); padding-bottom: var(--footer-h); } header .inner, footer .inner { width: 100%; max-width: var(--max-content-w); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } header, footer { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: #fff; } header { top: 0; height: var(--header-h); border-bottom: 1px solid #ddd; } footer { bottom: 0; height: var(--footer-h); border-top: 1px solid #ddd; } main { padding: 16px; } .btn { padding: 8px 16px; border: 1px solid #2563eb; background: #2563eb; color: #fff; border-radius: 6px; cursor: pointer; } /* モーダル関連 */ .modal { position: fixed; inset: 0; display: none; z-index: 1000; } .modal.is-open { display: block; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .modal__panel { position: relative; max-width: 600px; margin: 10% auto; background: #fff; border-radius: 8px; padding: 20px; z-index: 1; } .modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .modal__title { margin: 0; font-size: 18px; font-weight: bold; } .modal__close { background: none; border: none; font-size: 20px; cursor: pointer; } </style> </head> <body> <header> <div class="inner"> <h1>デモページ</h1> <button id="openModal" class="btn">モーダルを開く</button> </div> </header> <main class="container" id="main"> <h2>スクロール用の適当なコンテンツ1</h2> <p>ヘッダーとフッターは常に表示されます。モーダルボタンを押すと、画面いっぱいのダイアログが開きます。</p> <!-- ダミーカードを複数 --> <section class="grid"> <div class="card"><strong>カード1</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード2</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード3</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード4</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード5</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード6</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード7</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード8</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード9</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード10</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> </section> </main> <footer> <small>&copy; 2025 Demo</small> </footer> <!-- モーダル --> <div class="modal" id="modal"> <div class="modal__backdrop"></div> <div class="modal__panel"> <div class="modal__head"> <h2 class="modal__title">モーダル</h2> <button class="modal__close" id="closeModal">&times;</button> </div> <p>これは白いビューのモーダルです。背景は黒く半透明で覆われています。</p> </div> </div> <script> const modal = document.getElementById('modal'); const openBtn = document.getElementById('openModal'); const closeBtn = document.getElementById('closeModal'); const backdrop = modal.querySelector('.modal__backdrop'); openBtn.addEventListener('click', () => { modal.classList.add('is-open'); }); function closeModal() { modal.classList.remove('is-open'); } closeBtn.addEventListener('click', closeModal); backdrop.addEventListener('click', closeModal); window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('is-open')) { closeModal(); } }); </script> </body> </html>