Letter Customization Paragraph Input

[manishapriya94]

Code This line in lobjs documentation can either be string or template_id, it can be changed to customized data, either by sending back customized part via submit api and concating in the backend or send it as a file param which is concated in the frontend, adding a input field though as part of this issue

• - [x] create a user input textbox: takes merge_variable for Lob API method create_letter #370
  • in LetterLoad.vue, needs to be input text from Vuetiify
• [Function] Update lob function to append with from #371
  • lines 147 onward. Currently it checks payment before creating. We need to check payment from Stripe and if there is a merge variable. If there is, we append it to the object instance of letter template ID.
• Panel commands
  • Integrate this flow
• [Documentation] Document additions to Lob and Frontend Components #372

Resources:

• This screen view breakdown of data structures & fronend/backend components
• Related Epic

[manishapriya94]

@DietBepis1 security risks we should consider?

[DietBepis1]

The biggest concern with users modifying our Lob templates is a cross-site scripting attack (XSS). Developers who are working on Amplify may have even noticed a linting error where the Lob template is injected:

Some more info can be found here and here.

As for how to tackle the problem, we will need to have to have a way to sanitize a user's input. I am unsure if we can lean on Lob to do the sanitization, but that's one idea. Alternatively, before we re-render the template, we could write our own end-point that would parse it and return new html. A third idea would be to use some sort of rich text editor to create markdown and then transform it before sending to Lob.

Maybe none of those are good ideas, or there is a more elegant and obvious solution that I am overlooking. Let me know if you need help researching possibilities 😊.