search

Azure / api-management-developer-portal

Developer portal provided by the Azure API Management service.
MIT License
488 stars 318 forks source link

HTML code injection #1041

Closed sbenji77 closed 2 years ago

sbenji77 commented 3 years ago

Bug description

Hi, When you try to insert an html tag, for example with toggle code, the tags are displayed in front after publishing it.

Reproduction steps

  1. Go to 'Developper portal'
  2. Use text editor and select your tag
  3. Click on 'Toggle code'
  4. Publish and we can see the code in clear text in front

Expected behavior

We would like to be able to insert small HTML snippets for example.

Is your portal managed or self-hosted?

Self-hosted

On admin page image

On front page image

Thank you for your Help Cordialy

azaslonov commented 3 years ago

Hi @sbenji77, I actually just tried it, looks like it renders fine: image

Unless you want it to be rendered as:

If that's what you mean, then we don't support HTML injection into the page.

sbenji77 commented 3 years ago

It's a pity that it doesn't work because to customize some pages it would be a great simplification. Even the H tags at home don't work. Isn't this code toggle tool made for adding code? image On front image

Benjamin

mikebudzynski commented 3 years ago

We have plans to create a widget that will allow HTML code injection. I will mark this Issue as a feature request to track the progress.

Can you explain what code have you been trying to inject? What's the functionality that you need?

sbenji77 commented 3 years ago

Hello,

I would like to be able to add a modal, a slider, an anchor. I'm also looking for the possibility to put a search field in the pages as well but it's mainly for customisation.

Cordialy

AnRei123 commented 3 years ago

Hi,

I would be also interested for the widget with the html code injection for the following use cases:

AdeZwart commented 3 years ago

I would also love to see some possibilities to inject HTML code. Mainly to add a small table to a page.

mikebudzynski commented 3 years ago

Referencing #931

mikebudzynski commented 3 years ago

Thanks for sharing all the feedback. If you're facing any other challenges that an HTML code injection widget would solve - please, post them in this thread.

AnRei123 commented 3 years ago

Add-on - options enabled by html snippets:

mikebudzynski commented 3 years ago

Thanks for the feedback so far. We're now working on the problem space research and we need your feedback on the below points for each scenario you'd like to use the HTML code injection widget in. We appreciate all answers - please, post them in this thread or sent them directly to apimportalfeedback@microsoft.com with the issue number #1041 in the subject.

  1. Can you briefly describe the scenario you'd like to use the HTML code injection widget for?
  2. Do you need to reuse the custom code across the portal? For example, on a few pages.
  3. Do you need to reuse the media files from the portal in the custom HTML code?
  4. Do you need to reuse styling from the portal's styling guide in the custom HTML code?
  5. Do you need to reuse CSS styling across several instances of custom HTML code?
  6. Do you need client-server validation? For example, server validation if an entity submitted through a custom HTML form already exists.
  7. Do you need user authentication? For example, if an external service can be reached only by a user logged into the portal.
  8. Do you need authorization? For example, if the external service can be reached only by a logged-in user with a given claim.
  9. Do you need another authentication to secure the communication with the server? For example, a non-user-specific token.
  10. Do you need to authenticate users inside the custom HTML code with authentication other than OpenID Connect? For example, username and password.
AnRei123 commented 3 years ago
  1. Can you briefly describe the scenario you'd like to use the HTML code injection widget for? _AR: _use cases in future might be for example:
    • adding own buttons with a dedicated behavior such as a dedicated download button including icons.
    • adding viewports for external application snippets
    • simplify external authoring support and markdown migration/synchronization.
    • support individualized table and list formats
    • allow embedding forms to simplify request processes
    • Embedding dynamic and/or user-specific data/diagrams.
    • Embedding customer forums
    • Use special formats and designs_
  2. Do you need to reuse the custom code across the portal? AR: Haven´t thought about the advantages of this option yet. Might be.
  3. Do you need to reuse the media files from the portal in the custom HTML code? AR: yes, we would not like to manage the images externally.
  4. Do you need to reuse styling from the styling guide in the custom HTML code? AR: per default yes. Should be possible to change the styling on demand.
  5. Do you need to reuse CSS styling across several instances of custom HTML code? AR: yes, we currently already do for adding deprecation notes in the API descriptions. Here we refer to external stylesheets. But it would be good if everything would be at one place to keep the overview.
  6. Do you need client-server validation? For example, server validation if an entity submitted through a custom HTML form already exists. AR: yes, we might need to be able to do such kind of validations.
  7. Do you need user authentication? For example, if an external service can be reached only by a user logged into the portal. AR: yes, user authentication should be managed centrally by the portal.
  8. Do you need authorization? For example, if the external service can be reached only by a logged-in user with a given claim. AR: yes authorization to access/view dedicated data should be managed by the portal.
  9. Do you need another authentication to secure the communication with the server? For example, a non-user-specific token. AR: not sure yet, Might be to access dedicated Azure and non-azure services.
  10. Do you need to authenticate users inside the custom HTML code with authentication other than OpenID Connect? For example, username and password. AR: not thought about this yet, Currently, there is nothing like this planned.

AR:Remarks: For the markdown scenario it would be great if the the html code snippets could have dedicated place holders to allow developers to provide the markdown files as media files/packages that can be easily uploaded/updated or replaced in the media folder and that are automatically converted and replaced in the code snippet if the media file is correctly linked.

AnRei123 commented 3 years ago

Here an additional remark regarding question (7) above:

  1. Do you need user authentication? For example, if an external service can be reached only by a user logged into the portal. AR: yes, user authentication should be managed centrally by the portal. AR: It be also possible to login to another intranet service. Today I newly discussed such an upcoming and required use case with one of my colleagues. Here we like to embed external html sub pages that should be accessible by dedicated user groups. And that page might have an own sign-in mechanism. Not 100% clear at the current time what exactly will be required.
sbenji77 commented 3 years ago

Hi,

Our needs

Can you briefly describe the scenario you'd like to use the HTML code injection widget for?**

1 - To make a table, a slider, insert a video iframe. To be able to adjust block sizes, for example min-height. In this last point for example a simple page without much content will put a white frame if the background is of a different colour

Do you need to reuse the custom code across the portal? For example, on a few pages.**

2 - Not for everyone but if we can make short code to reuse it could be nice

Do you need to reuse the media files from the portal in the custom HTML code?

3 - Yes for platforms other than youtube

Do you need to reuse styling from the styling guide in the custom HTML code?

4- Yes in several instances

6 - 10 Not for the moment 

Do you need to reuse styling from the portal's styling guide in the custom HTML code?
Do you need to reuse CSS styling across several instances of custom HTML code?
Do you need client-server validation? For example, server validation if an entity submitted through a custom HTML form already exists.
Do you need user authentication? For example, if an external service can be reached only by a user logged into the portal.
Do you need authorization? For example, if the external service can be reached only by a logged-in user with a given claim.
Do you need another authentication to secure the communication with the server? For example, a non-user-specific token.
Do you need to authenticate users inside the custom HTML code with authentication other than OpenID Connect? For example, username and password.

Benjamin

sbenji77 commented 2 years ago

Hi @mikebudzynski

I can see that you have made progress in the project to implement the functionality. Do you have a visual of the deployment for us users please?

We would like to be able to integrate a Calendly calendar for our users to make appointments with us. This is easily done with an Iframe but as not possible at the moment.

Benjamin from Cdiscount

mikebudzynski commented 2 years ago

@sbenji77, we're working on a new widget that will allow you to inject custom HTML code in an iframe. Here's a draft version of the widget, we're still making improvements:

image

JMach1 commented 2 years ago

New widget was implemented and is ready to use. You can learn more about it here.