Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Receipts] Enlarge receipt contents so that it's easily readable #13266

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from

Conversation

AnirudhBhat
Copy link
Contributor

@AnirudhBhat AnirudhBhat commented Jan 9, 2025

Closes: #12760

Note to reviewers: Please see if the changes are worth the fix

Description

This PR addresses the following improvements for the receipt preview feature:

  1. Enhanced Receipt Content Visibility

Configured the WebView to scale content appropriately using viewport settings and JavaScript injection to ensure the receipt content fits the screen on all devices.

As a result of using Javascript, below security measures have been taken care of:

  1. Mitigation of Security Vulnerabilities in WebView

Strengthened WebView security by adding a domain name validation mechanism to ensure only trusted URLs are loaded.

  1. Additional Security Measures

Restricted unnecessary WebView features, such as file and content access, to reduce the attack surface.

Changes Made

  1. WebView Content Scaling

Injected a viewport meta tag and zoom scaling via JavaScript in onPageFinished.

  1. Updated WebView settings:
    Enabled useWideViewPort and loadWithOverviewMode for responsive rendering.

Disabled unnecessary features like allowFileAccess and allowContentAccess.

  1. Domain Validation

Added validation in shouldOverrideUrlLoading to block untrusted domains and handle them appropriately.
Implemented a fallback for older APIs to ensure consistent behavior across devices.

Security Vulnerability Concern

The primary concern was the potential Cross-Site Scripting (XSS) and phishing attacks due to enabling JavaScript in the WebView. While JavaScript is essential for scaling and rendering rich content like receipts, it also opens up the possibility for:

  1. XSS Attacks:

If an untrusted URL or malicious script is loaded into the WebView, it could execute arbitrary JavaScript, potentially compromising sensitive user data or app security.

  1. Phishing Attacks:

If the WebView loads a malicious URL that mimics a trusted domain, it could deceive users into sharing sensitive information.

  1. File or Content Access Exploits:

By default, WebView settings like allowFileAccess and allowContentAccess could expose local files or content providers to unauthorized access if not properly secured.

Why Domain Validation Was Added
To mitigate these risks, domain validation was introduced as a safeguard to ensure the WebView only loads content from trusted sources. This addresses the vulnerabilities by:

  1. Blocking Untrusted URLs:

Any URL that doesn't belong to the trusted domain(s) is rejected in the shouldOverrideUrlLoading method, ensuring only authorized content is rendered.

  1. Preventing Malicious Content Execution:

By restricting URL loading to a specific domain (e.g., https://your-trusted-domain.com), the app avoids loading scripts or assets from external or potentially harmful sources.

Steps to reproduce

  1. Navigate to any order with status "completed" (Open app -> Orders tab)
  2. In the order detail screen, click on "see receipt" button
  3. Ensure the receipt contents are displayed in enlarged font that fits to the screen

The tests that have been performed

Above mentioned steps

Images/gif

Before and After Comparison

Before After
receipt_before receipts_after
  • I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

@AnirudhBhat AnirudhBhat added type: enhancement A request for an enhancement. feature: order details Related to order details. labels Jan 9, 2025
@AnirudhBhat AnirudhBhat added this to the 21.5 milestone Jan 9, 2025
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Jan 9, 2025

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
App Name WooCommerce-Wear Android
Platform⌚️ Wear OS
FlavorJalapeno
Build TypeDebug
Commitbb52a3b
Direct Downloadwoocommerce-wear-prototype-build-pr13266-bb52a3b.apk

@wpmobilebot
Copy link
Collaborator

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

App Name WooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Commitbb52a3b
Direct Downloadwoocommerce-prototype-build-pr13266-bb52a3b.apk

settings.loadWithOverviewMode = true
settings.useWideViewPort = true
settings.apply {
javaScriptEnabled = true

Check warning

Code scanning / Android Lint

Using setJavaScriptEnabled Warning

Using setJavaScriptEnabled can introduce XSS vulnerabilities into your application, review carefully
@kidinov kidinov self-assigned this Jan 9, 2025
@kidinov
Copy link
Contributor

kidinov commented Jan 9, 2025

@AnirudhBhat Thanks for your work here!

It works fine, but I am wondering if we could just inject HTML in the page and avoid all these changes related to the JS enabling? E.g.

    private fun initViews(binding: FragmentReceiptPreviewBinding, savedInstanceState: Bundle?) {
        if (savedInstanceState != null) {
            binding.receiptPreviewPreviewWebview.restoreState(savedInstanceState)
        } else {
            with(binding.receiptPreviewPreviewWebview) {
                webViewClient = object : WebViewClient() {
                    override fun onPageFinished(view: WebView, url: String) {
                        viewModel.onReceiptLoaded()
                    }

                    override fun shouldInterceptRequest(
                        view: WebView,
                        request: WebResourceRequest
                    ): WebResourceResponse? {
                        val url = request.url.toString()

                        val connection = URL(url).openConnection()
                        val inputStream = connection.getInputStream()

                        val htmlContent = inputStream.bufferedReader().use { it.readText() }

                        val modifiedHtmlContent = htmlContent.replace(
                            "<head>",
                           "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
                        )

                        val newInputStream = modifiedHtmlContent.byteInputStream()
                        return WebResourceResponse(
                            "text/html",
                            "UTF-8",
                            newInputStream
                        )

                        return super.shouldInterceptRequest(view, request)
                    }
                }
            }
        }
    }

And maybe to extract some code from shouldInterceptRequest to a helper to be able to have tests, but not sure if it worth it.

image

wdyt?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: order details Related to order details. type: enhancement A request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Receipt size(HTML preview)
3 participants