[iOS] Drag & Drop 동작 막기(웹 사이트 링크 미리보기 막기)

Webview를 사용하다 보면 Link가 있는 태그들(a, img 등)에 대해서 Long touch 동작 및 드래그(웹 사이트 링크 미리보기)를 통해서 이미지를 받거나 다른 브라우저에서 여는 등의 동작이 되는 것을 알 수 있습니다.

애플 홈페이지상 가이드의 미리보기 안내 화면(https://support.apple.com/ko-kr/guide/iphone/iph1fbef4daa/ios)

(예제 gif 추가 예정)

일반적인 앱이라면 상관 없지만, 제가 일하고 있는 곳의 경우 보안이 중요한 메일의 경우에서는 해당 기능을 완전히 막아줘야 합니다.

메일 본문을 보는 부분이 WebView로 구현이 되어있다보니, 미리보기가 동작하더라구요.

관련 코드가 있어서 정리해보려 합니다.

1. HTML(style) 태그 수정

웹에서 보여주는 경우 해당 태그에 style을 수정하는 경우 그 기능이 막힌다고는 하는데... 정말로 막히는 태그와 막히지 않는 태그를 구분해보려 합니다.

1-1. 안막히는 태그(드래그 되는 태그)

// UIWebview with Objective-C
[webView stringByEvaluatingJavaScriptFromString:@"document.body.style.webkitTouchCallout='none'; document.body.style.KhtmlUserSelect='none'"];

// UIWebview with Swift
let result = webView.stringByEvaluatingJavaScriptFromString("document.body.style.webkitTouchCallout='none'; document.body.style.KhtmlUserSelect='none'")

// WKWebview with Objective-C
[webView evaluateJavaScript: @"document.body.style.webkitTouchCallout='none'; document.body.style.KhtmlUserSelect='none'"
		completeHandler:^(NSString *resurlt, NSError *error) {
        	
        }];

// WKWebview with Swift
self?.webView?.evaluateJavaScript("document.body.style.webkitTouchCallout='none'; document.body.style.KhtmlUserSelect='none'", completionHandler: { result, error in
	print(result)
})

(티스토리 코드블록엔 왜 Objective-C가 없지... 개무시하나 ㅠ)

단순히 해당 코드를 넣는 것 만으로는 16버전에서는 드래그가 되더라구요.

1-2. 막히는 태그(드래그 안되는 태그)

<style>
img, a {
    -webkit-touch-callout: none;
}
</style>
...
<img ... draggable="false" >

위 코드를 넣어주면 드래그 기능이 막히는 것을 확인했습니다.

웹 수정이 안되면 native에서 받은 html 정보를 수정하는 작업이 필요하겠죠...

 

2. Native에서 자체 기능 막기

extension UIWebView {
    open override func didMoveToWindow() {
        super.didMoveToWindow()
        
        disableDragAndDrop()
    }
    
    func disableDragAndDrop() {
        // 관련 동작 자체가 11.0이후 생겼기 때문에 이전 버전에 대해서는 동작 무시
        // https://medium.com/hackernoon/ios-11-vs-ios-10-comparison-review-in-ui-and-interaction-f13e89da1432
        // 위 링크 참고
        func findInteractionView(in subviews: [UIView]) -> UIView? {
            for subview in subviews {
                if #available(iOS 11.0, *) {
                    for interaction in subview.interactions {
                        if interaction is UIDragInteraction {
                            return subview
                        }
                    }
                } else {
                    // Fallback on earlier versions
                }
                return findInteractionView(in: subview.subviews)
            }
            return nil
        }
        
        if let interactionView = findInteractionView(in: subviews) {
            if #available(iOS 11.0, *) {
                for interaction in interactionView.interactions {
                    if interaction is UIDragInteraction || interaction is UIDropInteraction {
                        interactionView.removeInteraction(interaction)
                    }
                }
            } else {
                // Fallback on earlier versions
            }
        }
    }
}

WebView 내에서 Drag, Drop 기능 자체를 아예 remove 시켜버리는 방식입니다.

이 경우는 굳이 Webview가 아니더라도 적용할 수 있겠습니다.

참고자료

https://stackoverflow.com/questions/49911060/how-to-disable-ios-11-and-ios-12-drag-drop-in-wkwebview

How to disable iOS 11 and iOS 12 Drag & Drop in WKWebView?

https://stackoverflow.com/questions/63538771/disable-link-drag-on-wkwebview

Disable link drag on WKWebView

https://stackoverflow.com/questions/4314193/how-to-disable-long-touch-in-uiwebview

How to disable long touch in UIWebView?

https://developer.apple.com/documentation/uikit/uiview/1622527-didmovetowindow?language=objc 

didMoveToWindow() | Apple Developer Documentation

https://medium.com/hackernoon/ios-11-vs-ios-10-comparison-review-in-ui-and-interaction-f13e89da1432

iOS 11 vs iOS 10: Comparison Review in UI and Interaction