PayPal client implementation in Scala Play Issue

208 Views Asked by At

I am trying to implement PayPal checkout buttons in a Play Scala template using Webjars. This is the definition in sbt:

   "org.webjars" %% "webjars-play"% "2.6.1",
   "org.webjars"% "bootstrap"% "4.2.1" exclude ("org.webjars", "jquery"),
   "org.webjars"% "jquery"% "3.2.1",

This is the import in the template:

@import org.webjars.play.WebJarsUtil

I'm also including the jQuery, Popper.js and bootstrap javaScript plugin scripts.

The following html works well in the browser:

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <script
   src="https://www.paypal.com/sdk/js?client-id=sb">
  </script>
</head>
<body>
  <div id="paypal-button-container"></div>
  <script>
    paypal.Buttons().render('#paypal-button-container');
  </script>
</body>
</html>

but it does not render in the play template Thank you for your kind help to solve this problem

Krzysztof, problem solved with the following modification to Play configuration:

# Security Filter Configuration - Content Security Policy
play.filters.headers {
  contentSecurityPolicy = "default-src 'self' * .paypal.com;"
  contentSecurityPolicy = $ {play.filters.headers.contentSecurityPolicy} "img-src 'self' data: * .fbcdn.net * .twimg.com * .googleusercontent.com * .xingassets.com vk.com * .yimg.com secure .gravatar.com; "
  contentSecurityPolicy = $ {play.filters.headers.contentSecurityPolicy} "style-src 'self' 'unsafe-inline' cdnjs.cloudflare.com maxcdn.bootstrapcdn.com cdn.jsdelivr.net fonts.googleapis.com;"
  contentSecurityPolicy = $ {play.filters.headers.contentSecurityPolicy} "font-src 'self' fonts.gstatic.com fonts.googleapis.com cdnjs.cloudflare.com;"
  contentSecurityPolicy = $ {play.filters.headers.contentSecurityPolicy} "script-src 'self' 'unsafe-inline' 'unsafe-eval' cdnjs.cloudflare.com * .paypal.com;"
  contentSecurityPolicy = $ {play.filters.headers.contentSecurityPolicy} "connect-src 'self' twitter.com * .xing.com * .paypal.com;"

Thank you ¡

I also wanted to migrate from Play 2.6.11 to Play 2.7.0. However, after including the plugins and the dependency of Requirejs I get the following error in the execution:

ProvisionException: Unable to provision, see the following errors: 1) Error injecting constructor, java.lang.AbstractMethodError: Method org / webjars / play / RequireJS.play $ api $ mvc $ Results $ _setter_ $ PreconditionRequired_ $ eq (Lplay / api / mvc / Results $ Status;) V is abstract at org.webjars.play.RequireJS. <init> (RequireJS.scala: 9) at org.webjars.play.RequireJS.class (RequireJS.scala: 9) while locating org. webjars.play.RequireJS for the 2nd parameter of webjars.Routes. <init> (Routes.scala: .........

I wonder what the difficulty may be Thank you so much

1

There are 1 best solutions below

0
Krzysztof Atłasik On

Your problem is caused by CspFilter in your play app. If you're at play 2.7 or above, you could add csp nonce to every script you're adding to page. Let's say this is your template:

@* At the beggining import CSPNonce *@
@import views.html.helper.CSPNonce

@* It's important that you pass implicit request to your view, without script won't compile *@
@(title: String)(content: Html)(implicit request: RequestHeader)

<!DOCTYPE html>
<html lang="en">
    <head>
        @* Adding  @{CSPNonce.attr} would generate nonce for external script *@
        <script @{CSPNonce.attr} src="https://www.paypal.com/sdk/js?client-id=sb"></script>
    </head>
    <body>
      <div id="paypal-button-container"></div>
        @* Adding  @{CSPNonce.attr} would generate nonce for inline script *@
      <script @{CSPNonce.attr}>
        paypal.Buttons().render('#paypal-button-container');
      </script>
    </body>
</html>

In play 2.6 and before nonces were not implemented, so you'd have to implement it by yourself or allow inline scripts to be evaluated without nonces.

play.filters.headers.contentSecurityPolicy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.paypal.com"