Member Avatar for woocha

Hey Guys...I think this is the best forum for this question so here goes...

If you have ever sold anything on ebay, you know that your description code is displayed along with the ebay website code. Ebay does NOT use an IFRAME to display your add. Yet, when you view an item's listing the adds css and html does not interfere with the Ebay layout and/or css. The same thing can be said for webmail email clients such as yahoo and hotmail.

SO my question is this, How can I accomplish this same thing. AGAIN, I do not want to use an IFRAME.....any thoughts?

Thanks

  • 3 Contributors
  • 2 Replies
  • 203 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: yes — an iframe is not the only way. Marketplaces like eBay accept seller HTML but strip active content, restrict allowed tags and often rewrite or wrap listings server-side so site layout and styles don’t break. ( asked for this; was right that server-side processing is involved, and ’s note about unusual/unique class names matches how platforms avoid collisions.) eBay: HTML/active-content rules.

A practical, safe pipeline that reproduces that behaviour:

  1. Server-side sanitize incoming HTML with a whitelist approach (remove scripts, event handlers and dangerous URI schemes) — follow OWASP XSS prevention guidance. OWASP XSS Prevention Cheat Sheet.
  2. Namespace the fragment by wrapping it in a unique container and rewriting user CSS so every selector is prefixed to that container (reject or rewrite global selectors like html, body, *, and @import).
  3. Normalize/rename user classes and ids in the HTML so selectors stay correct but cannot collide with host styles. Proxy or block external resources referenced from user CSS.

Practical tools and techniques: don’t attempt selector rewriting with regex. Use a CSS AST tool to safely transform rules (for example, PostCSS plugins that prefix or wrap selectors) and a robust CSS parser when more control is needed. Examples: postcss-prefixwrap and the CSSTree parser for safe source-to-source transforms.

If JavaScript and modern browsers are acceptable, placing the content inside a Web Component’s Shadow DOM gives true encapsulation (no selector rewriting required) but requires hosting the snippet inside a custom element and has integration constraints. Using Shadow DOM (MDN).

Minimal illustration (concept only):

<div class="user-12345">
  <!-- sanitized & renamed user HTML -->
</div>

<style>
.user-12345 p { color: red; } /* prefixed rules from user's CSS */
</style>

Summary: server-side sanitization + deterministic namespacing (or Shadow DOM where practical) gives the same isolation marketplaces use, without iframes.

Recommended Answers

All 2 Replies

Member Avatar for buddylee17

I believe that this is done with some type of server side script to check if you are the seller. If you are the seller, it adds the extra code detailing how many are watching and other seller only details.

Member Avatar for MidiMagic

I have looked at this.

Their css is made using style names most people would never think of, using special characters.

The code showing those numbers is a server-side script.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.